Čo je dôležité 6

Napriek tomu, čo boli pokojné dva týždne pre nové Web Platform Features, máme vydanie What's !important, ktoré je poriadne nadupaté. Webová komunita mala zjavne čo povedať, tak si pripútajte pásy!

@keyframes animácie môžu byť reťazce

Peter Kröner sa podelil o zaujímavý fakt o @keyframes animáciách — že môžu byť reťazce:

@keyframes "@animation" { /* ... */
} #animate-this { animation: "@animation";
}

Yo dawg, time for a #CSS fun fact: keyframe names can be strings. Why? Well, in case you want your keyframes to be named "@keyframes," obviously! #webdev

[image or embed]

— Peter Kröner (@sirpepe.bsky.social) Feb 18, 2026 at 10:33

Neviem prečo by ste to chceli urobiť, ale je to určite zajímavá vec, ktorú sa dozvedáme o @keyframes po 11 rokoch podpory vo všetkých prehliadačoch!

: vs. = v style queries

Ďalší skrytý trik, tentokrát od Temani Afif, odhalil, že môžeme nahradiť dvojbodku v style query symbolom rovnosti. Temani robí skvelú prácu pri vysvetľovaní rozdielu, ale tu je rýchly úryvok kódu na zhrnutie:

.Jay-Z { --Problems: calc(98 + 1); /* Vyhodnotí sa ako calc(98 + 1), farba je blueivy */ color: if(style(--Problems: 99): red; else: blueivy); /* Vyhodnotí sa ako 99, farba je red */ color: if(style(--Problems = 99): red; else: blueivy);
}

Stručne povedané, = vyhodnocuje --Problems inak ako :, aj keď Jay-Z má nepochybne 99 problémov (sám to povedal).

Deklaratívne <dialog> (a aktualizovaný .visually-hidden)

David Bushell ukázal ako vytvoriť <dialog> deklaratívne pomocou invoker commands, užitočná funkcia, ktorá nám umožňuje preskočiť trochu J'Scriptu v prospech HTML a funguje vo všetkých webových prehliadačoch od nedávna.

Tiež vďaka zvedavej otázke od Anu Tudor článok splodil vedľajší produkt o minimálnom počte štýlov potrebných pre visually-hidden utility triedu. Je to stále sedem?

Možno nie…

Ako skrátiť text zo stredu

Wes Bos sa podelil o šikovný trik na skrátenie textu zo stredu pomocou iba CSS:

Someone on reddit posted a demo where CSS truncates text from the middle. They didn't post the code, so here is my shot at it with Flexbox

[image or embed]

— Wes Bos (@wesbos.com) Feb 9, 2026 at 17:31

Donnie D'Amato sa pokúsil o natívnejšie riešenie pomocou ::highlight(), ale ::highlight() má bohužiaľ niektoré obmedzenia. Ako spomenul Henry Wilkinson, výzva Hazel Bachrachovej z roku 2019 na natívne riešenie je stále otvorený ticket, tak držíme palce!

Ako spravovať farebné premenné pomocou relative color syntax

Theo Soti ukázal ako spravovať farebné premenné pomocou relative color syntax. Aj keď to nie je nová funkcia alebo koncept, je to úprimne najlepší a najkomplexnejší návod, aký som kedy čítal, ktorý rieši tieto zložitosti.

Ako prispôsobiť zoznamy (moderným způsobom)

V podobnom článku pre Piccalilli nám Richard Rutter komplexne ukázal ako prispôsobiť zoznamy, hoci tento obsahuje niektoré nugety toho, čo môžem len predpokladať, že je moderné CSS. Čo je symbols()? Čo je @counter-style a extends? Richard vás prevedie všetkým.

Nemôžete dostať dosť o počítadlách? Juan Diego dal dokopy komplexný sprievodca priamo tu na CSS-Tricks.

Ako vytvoriť typescales pomocou :heading

Safari Technology Preview 237 nedávno začalo testovať :heading/:heading(), ako vysvetľuje Stuart Robson. Pokračovanie je však ešte lepšie, pretože nám ukazuje, ako môže byť pow() použité na písanie čistejšej logiky typescale, hoci som nakoniec ostal pri staromódnych elementoch <h1>–<h6> s jednoduchšou implementáciou :heading a bez sibling-index():

:root { --font-size-base: 16px; --font-size-scale: 1.5;
} :heading { /* Ostatné štýly nadpisov */
} /* Za predpokladu iba base/h3/h2/h1 */ body { font-size: var(--font-size-base);
} h3 { font-size: calc(var(--font-size-base) * var(--font-size-scale));
} h2 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
} h1 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}

Una Kravets predstavila border-shape

Hovoríme o nových funkciách, border-shape prišiel ako prekvapenie vzhľadom na to, že už máme — alebo budeme mať — corner-shape. Avšak border-shape je odlišný, ako vysvetľuje Una. Rieši problémy s okrajmi (pretože to je okraj), umožňuje viac tvarov a dokonca funkciu shape() a celkovo funguje inak na pozadí.

modern.css chce, aby ste prestali písať CSS ako v roku 2015

Je čas začať používať všetko to moderné CSS a presne to vám chce pomôcť modern.css. Všetky tie úžasné funkcie, ktoré neboli podporované, keď ste o nich prvýkrát čítali, na ktoré ste zabudli? Alebo tie, ktoré ste zmeškali alebo úplne preskočili? Nuž, modern.css má 75 úryvkov kódu a pribúdajú ďalšie a všetko, čo musíte urobiť, je skopírovať ich.

Kevin Powell má pre vás tiež nejaké CSS úryvky

A komentujúci? Tí majú tiež!

Úprimne, Kevin je jediný web dev hovoriteľ, ktorého skutočne sledujem na YouTube a je tak blízko k miliónu sledovateľov práve teraz, tak sa uistite, že stlačíte tlačidlo "Prihlásiť sa na odber" starého K-Po.

V prípade, že ste to zmeškali

Vlastne ste toho veľa nezmešali! Firefox 148 vydal funkciu shape(), ktorá bola držaná v zajatí vlajkou, ale teraz je to základná funkcia. Safari Technology Preview 237 sa stal prvým, ktorý testuje :heading. To je všetko, čo sme videli od našich milovaných prehliadačov za posledné dva týždne (nepočítajúc obvyklú záplavu menších aktualizácií, samozrejme).

To povediac, Chrome, Safari a Firefox oznámili svoje ciele pre Interop 2026, odhaľujúc, ktoré Web Platform Features majú v úmysle urobiť konzistentnými naprieč všetkými webovými prehliadačmi tento rok, čo viac než vynahradí nedostatok lesklých funkcií tento týždeň.

Tiež prichádza (ale testovateľné v Chrome Canary teraz, rovnako ako border-shape) kľúčové slovo scrolled pre scroll-state container queries. Bramus hovorí o scrolled scroll-state queries tu.

Pamätajte, ak nechcete nič zmeškať, môžete zachytiť tieto Rýchle údery, keď sa novinky objavia v bočnom paneli css-tricks.com.

Vidíme sa o dva týždne!