CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n selainkohtaiset laajennukset, fallback-arvot ja feature detection (@supports)

Selainkohtaiset CSS-laajennukset

CSS:n varhaisessa kehitysvaiheessa selainvalmistajat toteuttivat uusia ominaisuuksia kokeiluversioina. Jotta kokeellisia ominaisuuksia pystyi käyttämään, oli web-kehittäjen hyödynnettävä CSS-koodissa nk. vendor-prefiksejä ja niihin liittyviä etuliitteitä. Esimerkiksi pyöristetyt kulmat toteutettiin Mozilla-selaimissa -moz-border-radius-ominaisuudella, WebKit-pohjaisissa selaimissa -webkit-border-radius, ja vasta CSS3:ssa ominaisuus standardoitiin ilman etuliitettä. Internet Explorer oli poikkeus: se ei käyttänyt vendor-prefiksejä ja toteutti CSS:n siten, että se poikkesi standardiehdotuksista


.boksi {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* standardi */
}

Nykyään CSS-prefiksejä käytetään harvoin. Jotkin ominaisuudet, kuten -webkit-line-clamp vaativat kuitenkin niiden käyttöä. CanIUse.com -palvelu on suositeltava tapa mahdollisen prefiksitarpeen tarkistamiseksi.

Fallback – varavaihtoehdot arvoille

CSS on suunniteltu siten, että tuntemattomat ominaisuudet tai arvot ohitetaan. Tämä mahdollistaa fallback-ratkaisut, joissa selaimelle tarjotaan kaksi arvoa. Ensin määritetään yleisesti tuettu arvo, kuten perinteinen väriarvo. Sen jälkeen tarjotaan uudempi arvo. Selain ottaa käyttöön jälkimmäisen arvon vain, jos se ymmärtää ominaisuuden. Alla olevassa esimerkissä color-mix funktiota käyttävät vain uudemmat selaimet: 


.button {
  background-color: #0066cc; /* fallback-väri */
  background-color: color-mix(in srgb, #0066cc 70%, white); /* moderni, color-mix ei toimi kaikissa selaimissa vielä */
}

Feature detection CSS:llä – @supports

CSS:n @supports-sääntö mahdollistaa ominaisuustunnistuksen eli feature detectionin. Sen avulla voidaan kokeilla CSS:n uusimpia piirteitä ilman, että sivuston yhteensopivuus eri selaimissa kärsii: 


@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

Kuten kaikki CSS-ominaisuudet, myös @supports-sääntö on hyödynnettävissä JavaScriptin kautta: 


if (CSS.supports("display", "grid")) {
    // tee jotain
} 
else {
    // fallback
}

Artikkelin tiedot

Otsikko: CSS:n selainkohtaiset laajennukset, fallback-arvot ja feature detection (@supports)

Kuvaus: Opi, miten rakennat CSS-tyylejä, jotka toimivat eri selaimissa. Tutustu CSS:n vendor prefixeihin, fallback-arvoihin ja @supports-sääntöön.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: