A CSS értő kézben igazi varázspálca, olyan kunsztokat is ki tud hozni egy egyszerű html kódból, amit a kezdő kóder álmában sem gondolna lehetségesnek. Ez persze nem jelenti azt, hogy kész és tökéletes lenne, fejlődésre mindig van lehetőség és persze igény is. Az, hogy a CSS jelenleg a 3-as iterációnál tart, igazából keveset jelent, ugyanis itt a fejlesztés a legtöbb programnyelvvel vagy applikációval szemben nem központilag, nagy releasekbe csomagolva történik, hanem folyamatosan készülnek az újabb és újabb funkciók és megoldások. Ezeket egyfelől rendszeresen közzé teszi a CSS fejlesztését koordináló World Wide Web Consortium (W3C), másrészt, ami a mi szempontunkból igazán fontos, ezek közül mazsoláznak a böngészők fejlesztői, és apránként beépítik őket az aktuálisan készülő újabb verziókba.

Ez viszont sajnos azt jelenti, hogy nincs egy dátum, amikortól kezdve egy vagány új megoldást alkalmazni tudunk, hanem azt kell figyelni, melyik böngésző melyik verziója képes a különböző új trükköket végrehajtani, azazhogy szabad-e már végre kipróbálni őket? Ha nem vagyunk biztosak a dolgunkban, a beszédes nevű Can I Use? honlap segítséget nyújthat a döntésben. Mutatja. melyik böngésző-verzió képes már kezelni az adott funkciót, és azt is, ez a teljes internethasználók körében hány százalékos lefedettséget jelent.

Ezt maximálisan szem előtt tartva bemutatnék néhány praktikus újítást a CSS fejlesztései közül, ami a közeli jövőben már szélesebb körben használható lesz, és nagyban feldobhatja a kódolók mindennapjait.

:is()

Ezzel a pszeudo-osztállyal kicsit leegyszerűsíthetjük, amikor egy osztályon belül több alosztályt is egyszerre módosítanunk kell, így elegánsabb, átláthatóbb lesz a kódunk. Például gyakran kell begépelnünk valami ehhez hasonlót:

.class h1,
.class h2,
.class h3 {
line-height: 1.2;
}

az :is használatával ugyanezt ennyiből letudhatjuk:

.class :is(h1, h2, h3) {
line-height: 1.2;
}

Lefedettsége:

min() max() és clamp()

Ezek az új funkciók a reszponzív wendesign hatékony fegyverei lesznek: a segítségükkel beállíthatjuk az ablakmérettel együtt változó értékek szélső értékeit, legyen szó ablak- , fontméretről, sormagasságról, vagy bármilyen beállítható értékről. Nagyon hasznosnak tűnnek, viszont kicsit szokni kell a használatukat, ugyanis nem teljesen intuitívak:

.container {
width: min(600px 70%);
}

Ez a kódrészlet azt jelenti, hogy mindig az az érték fog érvényesülni, amelyik éppen a legkisebb a zárójelben levők közül (lehet több is!), tehát normál esetben a módosított elem (pl. szövegdoboz vagy kép) 600 képpont széles lesz, de ha elérjük azt a képszélességet, ahol a 70%-os méret már kevesebb, mint 600px, azonnal az lép érvénybe, és a dobozunk elkezd zsugorodni. Okozhat némi fejfájást, hogy ezt korábban a max-width funkcióval állítottuk be, most viszont min-t kell írni…

Ugyanígy működik a max() érték a másik végleten, a clamp() pedig egyszerre foglalja magába a minimum és maximum értékeket, VALAMINT a kettő között a normál értéket, amit általános helyzetben tartani próbál majd az elemünk.

.container {
width: clamp(200px 50% 20rem);
}

Hasznos trükk ezekben a funkciókban, hogy matematikai formulákat is írhatunk a zárójelbe, méghozzá a calc parancs használata nélkül. Egy nagyon jó kis videó is végigvezet a funkció-csokor használatán:

Lefedettségük:

aspect-ratio

Régi tartozása a css-nek, hogy nem lehet az elemek képarányát egyszerűen beállítani. Most rohamosan közeledik az aspect-ratio paraméter, amivel pl. a beágyazott videók képarányát is egyszerűen beállíthatjuk állandó 16:9-re.

.video {
aspect-ratio: 16 / 9;
}

De ugyanígy játszi könnyedséggel helyezhetünk el négyzeteket is a lapunkban az 1 / 1-es aspect-ratio-val.

Lefedettsége:

text-decoration

Újabb remek eszközöket kapott a szövegdíszítés, a kedvencem a text-decoration-skip-ink, amivel a text-decoration: underline kóddal beállított aláhúzást módosíthatjuk úgy, hogy megszakadjon a benyúló szövegelemek alatt:

#decor {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: all;
  text-decoration-color: #63cdda;
}

Lefedettségük:

Ez csak egy kis ízelítő, mindenesetre jó tudni, hogy mi sem ülhetünk a babérjainkon, mindig van valami újdonság, amivel ügyesebb, frappánsabb lehet a kódunk. Tartsuk szemmel ezeket az újdonságokat, nemsokára abszolút érdemes lesz használni őket!