Konečne môžeme začať používať tie nádherné CSS veci

Na CSS3 sa čaká dlho. Možno si ešte nejaký čas počkáme na premenné v CSS ale tentoraz vymenujem pár vecí, ktoré už môžeme začať masovejšie používať. Veľa z nich si pripomeniete, jednu ste už určite všetci skúšali a mnohé ste vytesnili z hláv ako “teraz nie”. Je čas si vymenovať pár užitočných…

css3-techniques-15

1. CSS animácie: Podporuje ich už IE10 a tak nemusíme na pohyb “sprajtov” po stránke použiť javascript.

2. Calc: potrebujete od 100% šírky prvku odpočítať hodnotu v pixeloch? width: calc(100% – 40px); a s podporou už od IE9.

3. Rozšírené selektory: už nielen hover a visible… Podpora od IE9.

4. Generovaný obsah a počítadlá: s podporou od IE9.

5. Gradienty: konečne zminimalizujú nutnosť maľovať ich ako bitmapy.

6. Webfonty: tie už poznáme určite všetci, veľmi sme ich chceli, takže podpora a popularita je jasná. Preto je podpora už od IE6.

7. Veľkosti boxov box sizing: najboľavejší problém rozdielov v chápaní a počítaní box modelu je už dúfam kompletne preč. Toto by sme už určite mali začať využívať. Aj keď to nemá praktický vizuálny význam a je to len pre uľahčenie života pri písaní kódu, tak práve preto.

8. Obrázkové okraje boxov: konečne. Nepríjemné sekanie obrázkov kombináciou maličkých boxov a snaha ich napasovať na seba… Bohužiaľ až od IE11 ale už sa to treba začať učiť.

9. @media: staré známe, čo? avšak až tak zhusta to nepíšeme do kódu. Plne podporované, prečo si to nezopakovať ako sa to dá použiť?!

10. Viac pozadí v jednom boxe: pre mňa novinka avšak prelomová. Práve túto vec sa musím snažiť osvojiť pretože mám desiatky praktických problémov, ktoré som týmto mohol riešiť a nakoniec som to “hackoval”. Naviac je podpora vynikajúca.

11. Stĺpce textu pomocou CSS: opäť bomba, ktorú som raz riešil nesmierne komplikovane. Majú relatívne dobrú aj keď nie úplnú podporu.

12. Trojrozmerné transformácie: vec, ktorú v CSS3 galériách obdivujem aby som nakoniec zistil, že idú ledva v jednom z prehliadačov. Otáčanie stránok či objektov je už relatívne dobre podporované avšak IE ešte stále moc nie.

Výťah z článku 12 Awesome CSS3 Features That You Can Finally Start Using, kde nájdete detailnejší popis, ukážky a hlavne kompletnejšie odkazy na podporu jednotlivých prvkov v prehliadačoch. Snažil som sa aspoň u zaujímavejších o odkazy.

Napísal rony