Barion Pixel
Segédletek

Újdonságok a CSS-ben

2021. március 14. | Bognár Péter

# # # #

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:

blank
Forrás: Can I Use?

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:

blank
Forrás: Can I Use?

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:

blank
Forrás: Can I Use?

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;
}
blank

Lefedettségük:

blank
blank
blank
Forrás: Can I Use?

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!

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Motiváció A szabadúszó webdesignerek egyik rémálma: az árazás

A szabadúszó webdesignerek egyik rémálma: az árazás

2021. április 12.

Mennyit ér, amit megtanultál? Nos, amennyit fizetnek érte! Uhh, ez elég anyagiasan hangzik mi? Úgy vagyunk kondicionálva, hogy az ilyen megközelítést ne tartsuk helyesnek, mert az a társadalmilag PC, hogy igazából az elismerésért dolgozunk és távol áll tőlünk Mammon minden földi java és hiúsága. De ugye ez nem így van, mert sem elismerésért, sem lájkért […]

Tovább a cikkre