Print media type a zobrazovanie skratiek a odkazov

Print media type a zobrazovanie skratiek a odkazov

Jedna z vecí, čo mám na CSSkách obzvlášť rada, je možnosť špecifikovať výstupné zariadenie a vytvoriť rôzne štýly pre rôzne zobrazovacie médiá.

Zvyčajne štýlujem pre typy médií screen a print. Pozrime sa na štýlovanie webstránky pre tlač, teda na print media type, a na niektoré špecifiká štýlovania skratiek a odkazov v ňom s použitím pseudoelementov :before a :after.

Pseudoelementy :before, :after a :not

CSS pseudoelementy :before a :after definujú štýlovanie, ktoré má prehliadač aplikovať pred alebo za daným elementom. Pseudoelement :not definuje „nerovná sa“. Zvyčajne ich v screen media type nepoužívam, keďže nefungujú v IE6, ktorý je bohužial u nás stále používaný.

V print media type sa ale dajú v prehliadačoch, ktoré ich podporujú skvele využiť na expandovanie skratiek a hyperliniek. Na takýto účel sú skvelé, pretože použiteľnosť stránky v prípade, že ich prehliadač nepodporuje, nie je nijako zásadne obmedzená.

Ak sa nám dostane do ruky vytlačená stránka s rozpísanými linkami, je to skvelé, lebo namiesto ničnehovoriaceho podčiarknutého textu máme v rukách skutočné linky, ktoré môžeme zadať do prehliadača a nájsť čo potrebujeme.

Viac o typoch médii v CSS nájdete v špecifikácii CSS 2.1

Základné štýlovanie v print media type

Pri tlači webstránky je množstvo častí stránky zbytočných.

Vezmime si napríklad print.css tohto blogu. Predpokladáme, že niekto, kto si tlačí stránku, sa zaujíma o jej obsah, a nie o záhlavie, menu, vyhľadávací formulár a podobne.

Takže nastavíme paddingy a marginy na nulu, šírku správnych elementov na 100 % šírky tlačenej stránky.

Nastavíme tiež veľkosti písma pre body a nadpisy a typy písma pre body, nadpisy a niekoľko ďalších elementov, ktoré vieme, že sa budú v blogoch vyskytovať a chceme ich pre tlač naštýlovať inak, ako sú štýlované pre stránku.

Nadpisy pri tlači nemusia byť také veľké, aké je defaultne nastavenie, preto ich veľkosť nastavím menšiu. Tabuľkám nastavíme border, aby boli pri tlači ľahko čitateľné.

No a na záver zrušíme všetky časti stránky, ktoré nechceme pri tlači vôbec na stránke mať, teda header, menu, search a podobne.

@media print {
	body {font-size: 100%; font-family: 'Times New Roman', serif;}
	
	#container, #content #left, #content {
		width: auto;
		margin: 0;
		padding: 0;
	}
	#left .article-command, #left .article-details {width: auto;}

	h1, h2, h3, h4, h5, h6 {font-size: 16pt; font-family: Arial, sans-serif;}
	h2 {font-size: 14pt; font-weight: bold;}
	h3 {font-size: 12pt; font-weight: bold;}
	
	table td {border: 1px solid #A0A0A0;}
	
	#header, .Asp-Net-SearchForm, .menu, #right, #bottom, #footer .w30p
	{display: none;}
}

Zobrazovanie skratiek

Občas sa pritrafí, že ľudia na web stránkach využívajú označovanie skratiek korektným html tagom <abbr></abbr>. Pri prvom použití skratky na stránke by skratka mala byť vysvetlená, napríklad pomocou atribútu title.

Teda napríklad skratka CSS, by mala byť v HTML kóde zapísaná ako:

<abbr title=“Cascading Style Sheets“>CSS</abbr>

Pri tlači môžeme vysvetlenie skratky schované v title rozpísať pomocou pseudoelementu :after.

abbr:after, acronym:after {
   content:" (" attr(title) ")";
   font-size: 90%;
}

Preložme náš príkaz prehliadaču do ľudskej reči: Vezmi elementy abbr a acronym a za nich vygeneruj text definovaný v content, s veľkosťou 90 %.

Vlastnosť content je vlastnosťou pseudoelementov :before a :after. Jednou z jej hodnôt je funkcia attr(), ktorá vracia hodnotu vybraného atribútu elementu, na ktorý je pseudo-element aplikovaný.

V našom prípade teda za skratku vypíše: medzeru, ľavú zátvorku, hodnotu title a koniec zátvorky.

Zobrazovanie hyperliniek

a[href*="."]:not([href*="http://"]):not([href*="mailto:"]):after {
   content:" (http://tvorbawebstranok.net/" attr(href) ")";
   font-size: 90%;
}

a[href*="http://"]:after {
   content:" (" attr(href) ")";
   font-size: 90%;
}

Rozpísať odkazy je rovnako jednoduché ako rozpísať skratky. Je ale nutné ošetriť rôzne druhy liniek na stránke – externé linky, interné a e-maily.

Náš zápis hovorí:

Vezmi všetky elementy a, ktorých atribút href obsahuje čokoľvek, okrem stringov http:// alebo mailto:. Teda neberieme do úvahy externé linky a mejlové adresy. Následne do content-u vložíme URL blogu a za ňou hodnotu atribútu href.

V ďalšom kroku vyberieme všetky linky, ktorých href obsahuje string http:// a v zátvorkách vypíšeme.

Linky na mejlových adresách nemusíme rozpisovať, pretože všetky mejly na stránke beztak uvádzame rovno v správnom tvare – mejl@mejl.sk.

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.