Dnevnik eklektika - Piše Dragan Babić

HTML element

html element je jedan od elemenata koji se jako često “preskače” i zanemaruje jeste upravo koreni (_root_) html element. Kada se počinje sa svežim CSS fajlom, veoma često se desi da prvi selektor bude body selektor, ali pitam se zašto? html je prvi element, od njega potiču svi drugi (hijerarhijski), zašto li ga onda preskačemo? body element se mahom koristi za podešavanje default osobina za tekst, boje, line height, font, itd. i kada se koristi ova praksa body se tretira kao html element. Mislim da je krivac za to činjenica da html nema apsolutno nikakve osobine, ni margine, ni padding (logično), stoga kao i da ne postoji. Međutim ima zgodnih slučajeva kada se i html element da lepo iskoristiti.

Primer I—pozadine

Jedan od primera je recimo usklađivanje pozadina stranice. Ukoliko imate potrebu da vam se pozadina nastavlja u dva pravca (horizontalno i vertikalno, ili jednostavno imate potrebu da uklopite dve pozadinske slike bez ekstra markupa), u tom slučaju će vam html element doći vrlo korisno. Iskoristite njega i dajte mu recimo vertikalnu sličicu, a na body stavite sličicu koja će se ponavljati horizontalno i uštedeli sto jedan nesemantički div koji biste koristili samo za jednu od pozadiskih slika.

Kôd:

html{
  background:#fff url(images/html-vert.png) 0 0 repeat-y; /* ređamo sliku vertikalno <strong>/
}
body{
  background:url(images/body-horiz.png) 0 0 repeat-x; /</strong> ređamo sliku horizontalno */

Primer II—podešavanje osnovne veličine fontova

Ova tehnika (62.5% tehnika) zapravo mislim da ide Maratz-u a fora je u sledećem. Stavite na html element veličinu od 62.5% koja “resetuje” inicijalnu veličinu fonta na 10px, a potom na body stavite željenu veličinu fonta svoje stranice, ali ovaj put ćete vrlo lako znati koliki je vaš font zaista, i to možete činiti u procentima ili em-ovima, kako vam više odgovara, gde je isto navesti 1.1em i 110%, u oba slučaja tekst će vam biti 11px.
Na ovaj način elegantno ste oslobodili svoje elemente (poput npr. prvog wrappera i sl.) od bespotrebnih ponavljanja veličine fontova.

Kôd:

html{
  font-size:62.5%;
}
body{
  font-size:130%; /* sada je font 13px */
}

Neka vam ova dva primera posluže kao polazna tačka u daljem istraživanju i igri sa CSS-om i markupom.

• « Ubijanje monotonije u radu
• Povratak iz Praga i promene »

Komentari na ovaj unos 6

1. pavle kaže 15/05/06 03:53 PM

   html u css-u veoma cesto upotrebljavam, ne znam zasto se retko koristi, posto je veoma korisno :)

   Drugi primer vidim sad prvi put, mozda ga nisam dobro razumeo, da li sluzi samo da em i _%_ imaju ‘normalnu’ vrednost ili ima jos neku funkciju , posto ja vise volim da odredim u px velicinu fonta ( nego u em ili procentima ), tako da ne moram da pribegavam ovim forama :)

2. Dušan Dželebdžić kaže 15/05/06 10:33 PM

   @Dragan

   Verovatno zapostavljanje HTML elementa potiče od činjenice da se od davnina sav sadržaj strane nalazio u BODY-ju, a sâm HTML se tretirao kao nužno zlo, nešto što se mora napisati da bi strana bila validna (da, video sam tvoj komentar o validatoru kod mene :) )
   
   HEAD je sadržao “servisne informacije”, BODY all the juicy stuff, a HTML je bio samo nešto što drži to dvoje na jednom mestu.

   Što se 62.5% tehnike tiče, nekako mi je “semantičkije” da se u CSSu definiše font-size: small (sa x-small hackom za IE, jer on maši sve veličine za jedan korak). Generalno ne volim fiksiranje veličine slova – kome je normalno podešen browser, strana će se videti normalno. Kome nije, ceniće to što se strana vidi koliko-toliko dobro, sve dok može da pročita sadržaj.

   @pavle

   px nije dobar način za određivanje veličine fonta, jer se vezuje za veličinu piksela uređaja koji renderuje stranu, dok se kod pt-a određuje fizička veličina karaktera nezavisno od veličine tačke na uređaju.

   Uz to px pravi i accessibility problem kod IE-a, jer korisnik ne može da povećava veličinu slova prema sopstvenim preferencijama (ctrl + točkić). Koliko god ql bilo korišćenje 8-px karaktera, i dalje postoje ljudi koji ne mogu da čitaju slova manja od 20px.

3. Nemanja Sreckovic kaže 15/05/06 10:47 PM

   @Dusan, heh bolje objasnjenje px nisam jos cuo. :)

4. maratz kaže 16/05/06 02:36 AM

   ”Što se 62.5% tehnike tiče, nekako mi je “semantičkije” da se u CSSu definiše font-size: small (sa x-small hackom za IE, jer on maši sve veličine za jedan korak).”

   —Zašto bi bilo semantičkije, pogotovo kad se moraju primjenjivati i dodatni hackovi?

   ”Generalno ne volim fiksiranje veličine slova – kome je normalno podešen browser, strana će se videti normalno.”

   —Poanta je da su proporcije pod kontrolom. Općenito (i sasvim razumljivo je), većina ljudi ne razumije zašto je to nužno. Srećom, većina tih istih, niti ne znajući zašto, lakše čitaju/razumiju tipografski pravilno dizajnirane sadržaje.

   BTW, navodno je ovo the način da se cross-browser resetira font size

5. ZeRo kaže 10/09/06 01:53 PM

   Pozdrav…

   Pre pola godine sam poceo da pravim web stranice! Zeleo bih da postavim jedno pitanje ne vezano za ovu temu – kako da postavim na svoju stranu ovaj odeljak “komentari” da postavim da gosti mogu da upisu ime i komentar , i da ga posalju – pritom odmah da se stvori komentar na stranici !??

6. Dragan Babić kaže 10/09/06 02:33 PM

   

   @ ZeRo:
   Za to ti je potreban CMS, predlažem ti da pogledaš sajt http://textpattern.com/ i informišeš se malo više na tu temu.

Komentariši unos “HTML element”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.