CSS3
CSS3 on kokoelma moduuleja joista osa on valmiita ja virallisia suosituksia, osa vasta täysin kehitteillä ja osa näiden kahden väliltä. On siis tarkkaan tutkittava mitä ominaisuuksia uskaltaa jo käyttää tuotantoympäristöissä ja mitä ei. Jos on hiemankin epävarma niin kannattaa pitäytyä CSS2-suosituksen ominaisuuksissa.
CSS2 ja CSS3 erot
Suurin ero CSS2:en ja CSS3:en välillä on CSS3:en jakautuminen moduuleihin. CSS3 on niin suuri ja laaja, että sitä ei saataisi yhtenä kokonaisuutena ikinä valmiiksi ja siksi se on jaettu osiin ja näitä voidaan kehittää ja hyväksyä omina kokonaisuuksinaan.
CSS3 tuo mukanaan mm. seuraavia uusia ominaisuuksia:
- ominaisuuksien jakaminen moduuleihin
- pyöreät kulmat, varjostus ja kuvista muodostetut rajat
- esitystasot, joilla voi määrätä näytetäänkö enemmän vai vähemmän tietoja riippuen halutusta esitystasosta (tavallinen WWW-sivu vs. kalvo)
- SVG yhdistyy tiukemmin CSS:ään
- matemaattisten merkintöjen muotoilu
- uusia valitsimia
- lisäominaisuuksia tekstin muotoilemiseen
- tapahtumankäsittely
- nimiavaruuslaajennukset
- sarakelayout
- flexbox
- lisää ominaisuuksia kirjasinten ulkoasun muotoiluun
Virallisen suosituksen tasolla ovat tällä hetkellä (tammikuu, 2015) seuraavat moduulit:
- CSS Color Level 3
- CSS Namespaces
- Selectors Level 3
- CSS Level 2 Revision I
- CSS Level I
- Media Queries
- CSS Style Attributes
- CSS Print Profile (Note)
Muut moduulit ovat vasta kandikaattitasolla eikä niiden laajempi tuotantokäyttö ole vielä suositeltavaa. Varovaisesti valittuna voi joitakin yksittäisiä hyvin tuettuja ominaisuuksia käyttää myös keskeneräisistä moduuleista. Ajantasainen lista löytyy osoitteesta http://www.w3.org/Style/CSS/current-work.
Valitsimet
CSS3 sisältää uusia käteviä valitsia. Nämä on hyvin esitelty CSS3 selectors explained-dokumentissa.
- :target
- :enabled
- :disabled
- :checked
- :indeterminate
- :root
- :nth-child ja :nth-last-child
- :nth-of-type ja :nth-last-of-type
- :last-child
- :first-of-type ja :last-of-type
- :only-child ja :only-of-type
- :empty
- :not.
- ~-valitsin, joka tarkoitaa, että ensimmäisen elementin pitää edeltää toista ja molemmilla pitää olla sama vanhempi.
- Pseudo-valitsimissa käyteteen nyt kahta ::-merkkiä aiemman yhden sijaan. esim. :after pitääkin olla nyt ::after.
Media Queries
Mediakyselyjen avulla voidaan www-sivulla ottaa käyttöön eri CSS-tiedostoja sen mukaan minkälainen esitysympäristö sivulla on. Tällä saadaan sivusta responsiivisempi ja se mukautuu helposti eri kokoisiin näyttöihin sopivaksi.
Hyviä esimerkkejä mediakyselyistä:
Käyttäjien kommentit