Mazāk spraudņu, vairāk pārlūka: ko CSS 2026 dara jūsu mājaslapas labā

2026. gadā pārlūki paši prot lielu daļu no tā, kam WordPress lapā parasti uzstāda JavaScript spraudni: uznirstošos logus, rīka padomus un izvēlnes, kas turas pie pogas, akordeonus, ienākšanas animācijas un efektus ritinot. Popover, dialog, @starting-style, container queries, :has() un relatīvās krāsas strādā Chrome, Edge, Firefox un Safari jau vismaz gadu, enkura pozicionēšana (anchor positioning) kopš Firefox 147 2026. gada 13. janvārī, ar ritināšanu vadītas animācijas kopš Firefox 159 2026. gada 27. oktobrī. Katrs spraudnis, ko aizstāj ar pārlūka iespējām, nozīmē mazāk JavaScript, ko telefonam jāielādē un jāizpilda, mazāku risku lēnai reakcijai uz klikšķi (INP) un vienu atjauninājumu mazāk katru mēnesi. Pielāgojamais select, reading-flow, masonry izkārtojums un CSS random() vēl nav visos pārlūkos, tāpēc tos lieto tikai tā, lai vecāks pārlūks parāda vienkāršāku versiju un lapa nesalūzt. JavaScript joprojām vajag formām, filtriem, grozam, analītikai un visam, kam jāatceras lietotāja izvēle. Raksts sagatavots 2026. gada 14. novembrī.

Jaunākais par CSS iespējām pārlūkos

27.10.2026

Firefox 159 ieslēdz ar ritināšanu vadītas animācijas (animation-timeline). Ar to šī iespēja ir Baseline: tā strādā Chrome, Edge, Firefox un Safari.

26.10.2026

Safari 27.2 kā pirmais pārlūks ievieš grid lanes jeb masonry izkārtojumu. Chrome, Edge un Firefox to vēl neatbalsta.

10.2026

Chrome 156 pievieno CSS funkciju random(). Safari to ieviesa pirmais, Firefox vēl ne.

14.09.2026

Safari 27 pievieno pielāgojamo select (appearance: base-select), kas Chrome un Edge ir kopš 2025. gada aprīļa. Firefox vēl nav.

12.02.2026

Pārlūku izstrādātāji paziņo Interop 2026: 20 jomas, kurās pārlūkiem jāstrādā vienādi, starp tām enkura pozicionēšana, dialogi un popover, ar ritināšanu vadītas animācijas, container style queries un View Transitions.

13.01.2026

Firefox 147 ieslēdz enkura pozicionēšanu (anchor positioning), un web.dev to atzīmē kā Baseline.

Ko jums maksā katrs vizuālais spraudnis

Slīdnis, uznirstošais logs vai animāciju spraudnis lapā izskatās kā viena funkcija, bet telefonam tas parasti ir divi vai trīs faili: pats skripts, tā stils un bieži vēl jQuery vai cita bibliotēka, no kuras tas atkarīgs. HTTP Archive 2025. gada Web Almanac mērījumos mediānā lapa telefonā ielādē 22 JavaScript failus un 646 KB JavaScript saspiestā veidā. Pēc atspiešanas kods ir vēl vairākas reizes lielāks, un telefona procesoram tas viss jāapstrādā un jāizpilda.

Izmaksas ir trīs veidu:

• Ielāde un ātrums. Jo vairāk skriptu, jo ilgāk telefons ir aizņemts un jo lēnāk lapa reaģē uz pirmo pieskārienu. Tieši to mēra INP, un vizuālie spraudņi ir starp biežākajiem vaininiekiem. Kā INP mēra un kur to redzēt, aprakstījām rakstā Lapa ielādējas ātri, bet šķiet lēna.
• Drošība. Katrs spraudnis ir kods no cita izstrādātāja ar savām ievainojamībām un savu atjauninājumu grafiku. Kāpēc lielākā daļa WordPress uzlaušanu sākas spraudņos, stāstījām rakstā WordPress spraudņi kā drošības risks.
• Uzturēšana. Katrs atjauninājums jāpārbauda, jo slīdņa jaunā versija var sabojāt sākumlapu, un spraudnis, ko autors pārstāj atjaunināt, pēc gada kļūst par problēmu.

Mūsuprāt, vizuālais spraudnis ir vērtīgs tikai tad, ja tas dara kaut ko, ko pārlūks pats neprot. 2026. gadā tādu lietu ir krietni mazāk nekā pirms trim gadiem.

Kas 2026. gadā strādā visos galvenajos pārlūkos

Pārlūku izstrādātāji iespējas apzīmē ar Baseline statusu. “Newly available” nozīmē, ka iespēja strādā jaunākajās Chrome, Edge, Firefox un Safari versijās datorā un telefonā. “Widely available” piešķir 30 mēnešus vēlāk, kad lielākā daļa cilvēku jau ir atjauninājuši pārlūku. Šis saraksts ir par lietām, kuras uzņēmuma lapā visbiežāk dara ar spraudni.

Uznirstošie logi: popover un dialog

HTML atribūts popover ļauj ar parastu pogu atvērt logu, izvēlni vai paziņojumu bez nevienas JavaScript rindas. Pārlūks pats to parāda virs pārējā satura, aizver ar Esc un ar klikšķi ārpus loga. Baseline kopš 2025. gada 27. janvāra. Elements <dialog> modālajiem logiem visos pārlūkos strādā kopš 2022. gada: tas notur fokusu logā, kamēr tas atvērts, un atver to viena JavaScript rinda. Ar abiem var aizstāt uznirstošo logu spraudni, mobilo izvēlni un jaunumu pieteikšanās logu.

Rīka padomi un izvēlnes pie pogas: anchor positioning

Enkura pozicionēšana pasaka pārlūkam: “novieto šo logu zem šīs pogas, un, ja apakšā nav vietas, virs tās”. Agrāk to darīja ar bibliotēkām, kas pēc katras ritināšanas pārrēķina pozīciju. Chrome un Edge to prot kopš 125. versijas, Safari kopš 26. versijas, Firefox kopš 147. versijas 2026. gada janvārī. Kopā ar popover tas aizstāj rīka padomus pie cenām, izkrītošās izvēlnes un mazus paskaidrojuma logus. Enkura pozicionēšana ir arī Interop 2026 sarakstā, tātad pārlūki vēl saskaņo atsevišķas detaļas.

Akordeoni: details ar name

Elements <details> ar <summary> ir akordeons bez skripta, un atribūts name panāk, ka atvērts ir tikai viens jautājums no grupas. Baseline kopš 2024. gada 3. septembra. Teksts paliek HTML, tāpēc to redz Google, AI asistenti un pārlūka meklēšana lapā (Ctrl+F).

Ienākšanas animācijas: @starting-style

Ar @starting-style elements, kas tikko parādījies, piemēram, atvērts logs vai izvēlne, var ieslīdēt vai izgaist ar CSS pāreju. Agrāk tam vajadzēja skriptu, kas pievieno klasi pēc vienas kadra aiztures. Baseline kopš 2024. gada 6. augusta.

Efekti ritinot: scroll-driven animations

Ar animation-timeline animāciju piesaista ritināšanai: lasīšanas progresa josla, attēls, kas parādās, kad tas iebrauc ekrānā, vai viegls parallax. Agrāk to darīja ar animāciju bibliotēkām, kas klausās katru ritināšanas notikumu. Chrome to prot kopš 2023. gada, Safari kopš 26. versijas, un ar Firefox 159 2026. gada 27. oktobrī tas kļuva par Baseline. Animācijas ar transform un opacity pārlūks var izpildīt atsevišķi no lapas galvenā darba, tāpēc tās netraucē reaģēt uz klikšķiem.

Komponenti, kas pielāgojas vietai: container queries

Container queries ļauj komponentam mainīt izskatu pēc tā, cik vietas ir tam pašam, ne visam logam. Pakalpojuma kartīte sākumlapā trīs kolonnās un tā pati kartīte šaurā sānjoslā izskatās katra savai vietai atbilstoši, bez divām versijām un bez skripta, kas mēra platumu. Widely available kopš 2025. gada 14. augusta. Victor Ayomipo Smashing Magazine 2026. gada septembra rakstā iesaka media queries lietot visas lapas izkārtojumam un container queries atsevišķiem komponentiem. Mēs Figmā zīmējam tieši tā. Container style queries (stils pēc mainīgā vērtības) vēl tiek saskaņotas Interop 2026 ietvaros.

Stāvoklis bez skripta: :has()

Selektors :has() ļauj noformēt elementu pēc tā satura: kartīti ar attēlu citādi nekā bez tā, formas bloku ar kļūdainu lauku sarkanā rāmī, izvēlni, kurā atvērta apakšizvēlne. Tās ir lietas, kam agrāk rakstīja mazus skriptus, kas pievieno klases. Widely available kopš 2026. gada 19. jūnija.

Krāsu toņi no vienas krāsas: relative color syntax

Relatīvā krāsu sintakse (rgb(from var(--zimols) r g b / 0.6) un līdzīgi) ļauj no vienas zīmola krāsas iegūt gaišāku pogas fonu, tumšāku hover stāvokli vai caurspīdīgu ēnu. Baseline kopš 2024. gada 16. septembra. Tas vairāk atvieglo izstrādi nekā ielādi, bet nozīmē, ka zīmola krāsu var nomainīt vienā vietā.

Ko pārlūki vēl tikai ievieš

Chrome komanda pārskatā CSS Wrapped 2025 (2025. gada decembris) uzskaitīja 22 jaunas CSS iespējas, kas tajā gadā nonāca Chrome, un daļa no tām citos pārlūkos vēl nav. Šīs iespējas jau var izmēģināt, bet 2026. gada novembrī tās nestrādā visos galvenajos pārlūkos. Tās drīkst lietot tikai tur, kur pārlūks bez atbalsta parāda pieņemamu vienkāršāku versiju.

• Pielāgojamais select (appearance: base-select). Parasto izkrītošo sarakstu var noformēt pilnībā, arī ar attēliem opcijās. Chrome un Edge kopš 135. versijas (2025. gada aprīlis), Safari kopš 27. versijas (2026. gada septembris), Firefox vēl nav. Jemima Abu LogRocket rakstā “CSS in 2026” salīdzina: līdzīgs JavaScript saraksts prasītu vairāk nekā 150 rindu, bet ar pielāgojamo select pietiek ar parastu <select>, dažiem data atribūtiem un CSS. Tastatūras vadību un fokusu dara pārlūks, un Firefox parāda parastu sarakstu.
• reading-flow. Saskaņo tastatūras pārvietošanās secību ar vizuālo secību, kad elementi grid vai flex izkārtojumā ir pārkārtoti. Pagaidām tikai Chrome un Edge.
• Grid lanes jeb masonry. “Pinterest” tipa izkārtojums portfolio vai galerijai bez skripta. Pagaidām tikai Safari 27.2.
• CSS random(). Nejauša vērtība tieši CSS, piemēram, nedaudz atšķirīgs pagrieziens katrai kartītei. Brecht De Ruyte Smashing Magazine 2026. gada oktobra rakstā iesaka to dekoratīviem sīkumiem, bet ne izkārtojumam un pogām. Safari un Chrome 156, Firefox vēl ne.
• Rīka padomi pēc kursora uzbraukšanas (interestfor). Pagaidām tikai Chrome un Edge, tāpēc rīka padomus mēs pagaidām veidojam ar klikšķi vai pieskārienu.

Jemima Abu pati brīdina, ka “Most of these features are very new and still rolling out across browsers”. Klienta lapā tās lietojam tikai kā uzlabojumu virs strādājošas pamata versijas.

Ko redz cilvēks ar vecāku pārlūku

Progresīvā uzlabošana nozīmē, ka lapas pamata versija strādā visur, un jaunā iespēja tikai pieliek ko klāt tur, kur pārlūks to prot. CSS šim ir @supports nosacījums: ja pārlūks iespēju neatbalsta, tas noteikumu izlaiž un rāda parasto noformējumu.

• Ritināšanas animācija: vecāks pārlūks parāda saturu uzreiz, bez animācijas. Saturam jābūt redzamam arī bez tās, tāpēc to nekad neslēpjam ar opacity: 0, kamēr animācija nav sākusies.
• Pielāgojamais select: Firefox rāda parastu sistēmas sarakstu, un izvēle strādā.
• Logs ar enkura pozicionēšanu: pārlūks bez atbalsta to parāda vienkāršā pozīcijā, piemēram, ekrāna apakšā.
• Animācijas izslēdzam vai mazinām cilvēkiem, kuri ierīcē ieslēguši “samazināt kustību” (prefers-reduced-motion). Sīkāk par to un par pārejām starp lapām rakstījām rakstā Pāreja starp lapām kā aplikācijā.

Šādi strādājot, lapai nav jāgaida, kamēr pēdējais pārlūks ieviesīs iespēju. Atbalsts pieaug pats, cilvēkiem atjauninot pārlūkus.

Kur JavaScript joprojām vajag

CSS un HTML aizstāj noformējumu un vienkāršu uzvedību. Viss, kam jāatceras dati, jāsazinās ar serveri vai jāpieņem lēmums, paliek JavaScript vai servera kodā:

• formas ar nosūtīšanu, sarežģītu pārbaudi un surogātpasta aizsardzību;
• filtri, meklēšana un kārtošana katalogā vai interneta veikalā;
• grozs, kase, apmaksa un piegādes izvēle;
• analītika un sīkdatņu piekrišana: pats logs var būt popover, bet izvēle jāsaglabā un jāpaziņo analītikas rīkiem;
• rezervācijas, kalendāri, kartes, kalkulatori;
• karuselis ar automātisku pārslēgšanu un punktiem. CSS ::scroll-marker pagaidām strādā tikai Chrome, un mūsuprāt automātisks slīdnis sākumlapā vairumā gadījumu nav vajadzīgs vispār.

Mērķis ir mazāk JavaScript tur, kur tas ir lieks. Pašu JavaScript nevajag izskaust.

Piemērs: tūrisma uzņēmuma WordPress lapa Cēsīs

Pieņemsim, ka Cēsīs strādā uzņēmums, kas organizē laivu braucienus pa Gauju un pārgājienus. WordPress lapā ir 14 spraudņi. Pieci no tiem ir tikai vizuāliem efektiem: slīdnis sākumlapā, uznirstošais logs ar atlaides kodu, akordeons BUJ lapā, rīka padomi cenu tabulā (“kas iekļauts braucienā”) un animāciju spraudnis, kas liek blokiem ieslīdēt, ritinot lapu. Divi no tiem ielādē jQuery. Search Console vasaras sezonā rāda INP telefonā 310 ms, kas ir zonā “jāuzlabo”, un katru mēnesī ir vidēji 9 spraudņu atjauninājumi.

Ko aizstāja

1. Slīdnis. Sākumlapā palika viens liels attēls ar virsrakstu un pogu “Pieteikt braucienu”. Sešas maršrutu fotogrāfijas pārcēla horizontālā galerijā ar CSS scroll-snap, ko telefonā pārvelk ar pirkstu.
2. Uznirstošais logs. Atlaides logu pārtaisīja par <dialog>, kas atveras ar @starting-style animāciju un tikai pēc tam, kad cilvēks noritinājis līdz maršrutu sarakstam.
3. Akordeons. 18 BUJ jautājumi tagad ir <details name="buj"> elementos, un teksts ir HTML.
4. Rīka padomi. Pie katras cenas ir poga “i”, kas ar popover un enkura pozicionēšanu atver paskaidrojumu zem cenas.
5. Animācijas. Bloku parādīšanos ritinot izdara animation-timeline: view() nosacījumā @supports. Pārlūkos bez atbalsta bloki ir redzami uzreiz.

Pārējie 9 spraudņi palika: formas, rezervāciju kalendārs, SEO, kešatmiņa, drošība, rezerves kopijas, tulkojumi, sīkdatņu piekrišana un attēlu optimizācija. Darbs prasīja apmēram 14 programmētāja stundas, un visu vispirms pārbaudīja lapas kopijā.

Rezultāts pēc 28 dienām

JavaScript apjoms sākumlapā telefonā samazinājās no aptuveni 410 KB līdz 120 KB, jo jQuery vairs nevajadzēja nevienam spraudnim lapas priekšpusē. INP telefonā Search Console datos pēc 28 dienām nokritās no 310 līdz 140 ms, zonā “labs”. Spraudņu atjauninājumu mēnesī kļuva vidēji 5, un pazuda pats sarežģītākais: slīdņa atjauninājums, pēc kura vienmēr bija jāpārbauda sākumlapa. Izskats palika tāds pats, un BUJ teksts tagad ir atrodams Google meklētājā, jo vairs neatrodas skripta iekšienē.

Pārbaude 30 minūtēs: kurus spraudņus var aizstāt

1. Spraudņu saraksts. WordPress administrēšanā atveriet “Spraudņi” un atzīmējiet tos, kas dara tikai kaut ko vizuālu: slīdņi, uznirstošie logi, akordeoni, cilnes, rīka padomi, animācijas, galerijas.
2. JavaScript apjoms. Chrome DevTools atveriet cilni Network, izvēlieties filtru JS, ieslēdziet telefona režīmu un pārlādējiet sākumlapu. Apakšā redzams failu skaits un apjoms.
3. INP. PageSpeed Insights sadaļā par reāliem lietotājiem paskatieties INP telefonā. Ja tas pārsniedz 200 ms, vizuālie spraudņi ir pirmie aizdomās turētie.
4. Kur spraudni izmanto. Katram atzīmētajam spraudnim pierakstiet lapas, kurās tas strādā. Bieži slīdnis ir vienā lapā, bet skripts ielādējas visās.
5. Izslēgšana kopijā. Lapas kopijā (ne tiešsaistē) izslēdziet vienu spraudni un apskatiet, kas pazūd. Tā redzat, cik liels ir aizstāšanas darbs.
6. Pārlūki. Atveriet lapu Chrome, Firefox un Safari telefonā. Ja kāds efekts strādā tikai vienā, tas jau tagad ir pārbaudāms.
7. Atjauninājumi. Saskaitiet, cik spraudņu atjauninājumu bija pēdējā mēnesī un cik no tiem bija vizuālajiem spraudņiem.

Ko izdarīt šomēnes

• Atzīmējiet spraudņus, kas lapā dara tikai kaut ko vizuālu.
• Izmēriet JavaScript apjomu sākumlapā telefonā.
• Pārbaudiet INP telefonā PageSpeed Insights reālo lietotāju datos.
• Lapas kopijā izslēdziet vienu vizuālo spraudni un apskatiet, kas mainās.
• Pārliecinieties, ka saturs ir redzams arī bez animācijām.
• Akordeonu un BUJ tekstam jābūt HTML, ne skriptā.

Biežāk uzdotie jautājumi

Lapa, kurā spraudņu ir tikai tik, cik vajag

Jaunā uzņēmuma lapā no 1400 € + PVN, gatavā 2-3 nedēļās, logus, izvēlnes, akordeonus un animācijas programmējam WordPress tēmā ar HTML un CSS, un spraudņus liekam tikai formām, SEO, kešatmiņai un drošībai. Ja lapa jums jau ir, atsūtiet tās adresi un spraudņu sarakstu vai zvaniet +371 25 640 062. Pateiksim, kurus spraudņus var aizstāt un cik JavaScript tas noņemtu. Lapām, ko veidojis kāds cits, uzturēšanā vispirms pārbaudām spraudņus, kopijas un piekļuves. Ja domājat par lielāku pārbūvi, aprēķinu piemērs ir rakstā Kā saprast, vai mājaslapas redizains atmaksāsies.

Avoti

• web.dev: Baseline (Newly available un Widely available definīcija)
• web.dev: Interop 2026: Continuing to improve the web for developers (12.02.2026)
• wpt.fyi: Interop 2026 panelis
• web.dev: New to the web platform in January (2026)
• web.dev: New to the web platform in October (2026)
• MDN: Firefox 147 release notes for developers (13.01.2026)
• MDN: CSS anchor positioning
• Web platform features explorer: Scroll-driven animations
• Web platform features explorer: Popover
• Web platform features explorer: Customizable select
• Web platform features explorer: reading-flow
• Web platform features explorer: Grid lanes
• Chrome for Developers: CSS Wrapped 2025 (08.12.2025)
• HTTP Archive: Web Almanac 2025, Page Weight
• Smashing Magazine: Stop Treating CSS Container Queries Like Traditional Media Queries (Victor Ayomipo, 16.09.2026)
• Smashing Magazine: Embracing Playful Imperfection With The CSS random() Function (Brecht De Ruyte, 20.10.2026)
• LogRocket: CSS in 2026: The new features reshaping frontend development (Jemima Abu, 21.01.2026)