Ajtaci.net

Dnes budeme pokračovat v našem seirálu o tvorbě webových stránek. Omlouvám se za dlouhou nečinnost v psaní tohoto seriálu, snad se mi to podaří brzy vynahradit.

Ne všechno funguje všude
Existuje hodně CSS vlastností, se kterými si některé prohlížeče hravě poradí, jiné nikoli. A u některých jen v novějších verzích nebo částečně, atp. Podle mě nemá cenu se moc učit něco, na co se nelze spolehnout všude. Tady je seznam pár takových vlastností.

IE: filtry (filter), kurzory myši (cursor), barvení posuvné lišty (scrollbar-xxx-color), tři tečky na konci dlouhých slov (text-overflow: elipsis), různá lámání slov (word-break, word-wrap).
Mozilla: min-width, max-height, ekvivalent atributu cellspacing (border-spacing), spousta vlastností typu -moz-vlasnost.

Jak na průhlednost v IE i v Mozille
V IE nám na to stačí filter a vlasnost alpha-opacity (v procentech), Mozille je přímo vlastnost -moz-opacity (číslo od 0 do 1, desetinná tečka)

.polopruhledny {
-moz-opacity: 0.5;
filter: alpha(opacity=50%);
color: blue;
}

Kdybyste někdy slyšeli pojem pseudotřída…
Pak jste se s ní již setkali. Už v úvodu o CSS – jsou to ty selektory s dvojtečkou. Kupříkladu a:hover je pseudotřída.

Vlastnosti pro nastavení rozměrů a obtékání
Už jsme se párkrát setkali s klasickými vlastnostmi pro nastavení výšky a šířky. width: 80%, height: 200 px;
Kromě nich ještě stojí za zmínku min-width, max-width, min-height a max-height,
jež udávají nejmenší a největší možnou šířku a výšku daného plošného prvku. v IE ale bohužel fungují až od verze 7.
Obtékání jako takové se nastavuje vlasností float: none/left/right (left normální odstavec, right obtékán zleva – tudíž je vpravo).

Margin a padding
Margin – nastavuje vnější okrah (vynechaný pruh) objektu.
Padding – nastavuje vnitřní okrah (vynechaný pruh).

Pozor na chybnou interpretaci width v Internetu Exploreru
Pokud nastavíte vlasnost padding a zároveň width a doufáte, že width bude celková velikost a z ní se odpočítá padding (vnitřní okraj), v Mozille a dalších prohlížečích by tomu tak mělo být, ale v IE můžete narazit na problém. IE (především v quirk módu, nevím jak jsou na tom nejnovější verze) prostě padding a width sečte a vykreslí, takže potom width se nerovná celké šířce objektu ale tomuto součtu (plus případně ještě rámeček).

Malé shnutí
Takže zatím bychom měli umět například: Vytvořit odstavec a nastylovat si ho – nastavit mu pozadí (barvu a obrázek), rámeček (barvu, tloušťku a styl), text (barva, font, velikost, tučné či kurzíva, případně něco dalšího). Kromě toho také nastavit obrázek na pozadí stránky, opakující se pouze v y-souřadnicích a různé vlasnosti pro odkazy, ať už navštívený, nenavšívený, aktivní, apod. Ale to není všechno. Už bychom měli umět taky základní nastylování tabulky, seznamu. A po tomhle díle bychom tedy mohli umět nastavit rozměry, obtékání, vnitřní a vnější vynechané místo.

Uznejte sami, že už tyhle všechny možnosti jsou oproti klasickému HTML nesrovnatelně bohatší. Jak jsem psal, není si třeba pamatovat úplně všechno, ale semtam si na některou věc vzpomenout, že existuje a případně si jí dohledat.
Příště bych se rád zaměřil na pozicování a tím pak bude tato část, kde jsem dost zrychlíku vychrlil spousty CSS vlasností, u konce. Závěr povídání o CSS bych chtěl připravit aspoň o něco málo zajímavější.