60+ najboljih pitanja i odgovora za intervju za CSS (2026.)

Spremate se za razgovor za posao CSS-a? Vrijeme je da usavršite svoje znanje o osnovama i šire. Razumijevanje Intervju za CSS pitanja mogu otkriti koliko duboko kandidati razumiju strukturu dizajna i logiku stiliziranja.

Karijera u CSS razvoju otvara vrata raznim mogućnostima, od front-end dizajna do responzivnih web aplikacija. S tehničkim iskustvom, stručnošću u domeni i snažnim analitičkim vještinama, profesionalci mogu pokazati napredne vještine koje voditelji timova i menadžeri cijene. Ova pitanja i odgovori pomažu početnicima, programerima srednje i više razine da samouvjereno i učinkovito polože intervjue.

Koristeći uvide koje je podijelilo više od 85 stručnjaka, uključujući tehničke voditelje, menadžere i stručnjake za zapošljavanje, ovaj vodič sastavlja pouzdane prakse intervjua u svim industrijama, osiguravajući točnost, relevantnost i vjerodostojnost za sve razine iskustva.

Najčešća pitanja i odgovori za CSS intervju

1) Objasnite modernu CSS kaskadu, uključujući `@layer`, specifičnost i redoslijed izvora.

Kaskada odlučuje koje pravilo "pobjeđuje" kada više pravila cilja isti element. Odluka se donosi prema važnosti ( !important ), porijeklo (korisnički agent, korisnik, autor), zatim redoslijed slojeva iz @layer, nakon čega slijedi specifičnost i konačno redoslijed izvora. Korištenje @layer omogućuje vam definiranje predvidljivih slojeva kao što su resetiranje, baza, komponente i uslužni programi tako da cijele grupe pravila nadjačavaju druge bez povećanja specifičnosti selektora. Glavna prednost je održavanje; glavni nedostatak je što nepravilan redoslijed slojeva može sakriti greške. Preferirajte selektore klasa niske specifičnosti, rezervirajte !important za promišljene politike i održavati arhitekturu čitljivom.

Odgovorite s primjerima

@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }

👉 Besplatno preuzimanje PDF-a: Pitanja za intervju za CSS

2) Po čemu se kontejnerski upiti razlikuju od medijskih upita i gdje biste koristili svaki od njih?

Upiti kontejnera odgovaraju na veličinu ili stil sadrži element, čineći komponente samosvjesnima i ponovno upotrebljivima u različitim kontekstima. Medijski upiti odgovaraju na vidikovca ili karakteristike uređaja i sjaj za globalne promjene rasporeda. Upiti kontejnera omogućuju lokalnu prilagodbu kartica, widgeta i ugniježđenih modula; medijski upiti ostaju idealni za navigaciju na cijeloj web-lokaciji ili promjene ljuske. Prednosti upita kontejnera uključuju finiju granularnost i manje globalnih točaka prekida; nedostaci uključuju postavljanje putem container-type i pažljiv odabir granica.

Razlika između (tablica usporedbe)

Faktor	Upiti za medije	Upiti o kontejnerima
Okidač	Značajke prikaza	Veličina ili stil spremnika
Djelokrug	Na cijeloj stranici	Lokalna komponenta
Postavljanje	Ništa izvan svake sumnje	Zahtijeva `container-type` / opcionalno ime
Najbolje za	Globalne točke prekida	Varijante kartica ili widgeta

Odgovorite s primjerima

/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
   .card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}

3) Koje su karakteristike i prednosti `:has()`, i kako se to uspoređuje s `:is()` i `:where()` ?

Relacijska pseudo-klasa :has() odabire element na temelju njegovih potomaka ili sljedećeg uzorka, omogućujući stiliziranje roditeljskog stanja bez JavaSkripta. Ovo je moćno za grupe za validaciju obrazaca, stanja navigacije ili prekidače gustoće. Nasuprot tome, :is() i :where() pojednostaviti duge popise selektora; :where() doprinosi nultoj specifičnosti, dok :is() doprinosi specifičnosti svog najspecifičnijeg argumenta. Prednosti :has() uključuju kontekstualno stiliziranje i čišće označavanje; nedostaci uključuju potencijalne probleme s performansama ako se koristi s neograničenim selektorima. Usko ga ograničite i kombinirajte s klasama ili atributima radi predvidljivosti.

Odgovorite s primjerima

/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }

/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }

/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }

4) Gdje biste primijenili CSS prilagođena svojstva za teme i koje su njihove prednosti i nedostaci?

CSS prilagođena svojstva prenose vrijednosti kroz kaskadu, prirodno se nasljeđuju i rješavaju za vrijeme izvođenja, što ih čini idealnim za teme, načine gustoće i tokene dizajna. Omogućuju prebacivanje između tamnog načina rada ili zamjenu.ping sustave boja bez ponovne izgradnje resursa. Prednosti uključuju dinamička ažuriranja, kolokaciju s komponentama i kompatibilnost s @layerNedostaci uključuju indirekcije za statičke analizatore i potrebu za dizajniranjem rezervnih rješenja. Koristite tokene s opsegom korijena za globalnu semantiku i tokene s opsegom komponente za varijante te održavajte imena stabilnima kako biste omogućili dugoročno održavanje.

Odgovorite s primjerima

:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
   :root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }

5) Koji sustav izgleda odgovara kojem problemu: Flexbox, Grid ili Subgrid?

Flexbox je optimalan za jednodimenzionalni poravnanje i distribucija duž jedne osi, Grid se ističe u dvodimenzionalan plasman i eksplicitno track kontrola, a Subgrid omogućuje podređenim elementima nasljeđivanje nadređene mreže tracks za dosljedno poravnanje ugniježđenih komponenti. Odabir pravog sustava smanjuje nadjačavanja i poboljšava čitljivost. Uobičajeni uzorak je Grid za okvire stranica i nadzorne ploče, Flexbox za alatne trake i popise čipova te Subgrid za poravnavanje unutarnjih elemenata poput metapodataka kartice s vanjskim stupcima.

Vrste i razlike između (usporedba)

Koristite slučaj	flex box	rešetka	Podmreža
Dimenzija	1-D	2-D	2D putem naslijeđenog tracks
snaga	Distribucija, poravnanje	Eksplicitna područja, ponovljiva tracks	Poravnanje među komponentama
Postavljanje	minimum	Definiraj retke/stupce	Potrebna je nadređena mreža
Primjer	Navigacijske trake, tablete	Galerija, nadzorne ploče	Podnožja kartica poravnata s mrežom stranice

Odgovorite s primjerima

.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

6) Poboljšavaju li logička svojstva internacionalizaciju? Objasnite prednosti i nedostatke.

Logička svojstva zamjenjuju fizičke smjerove poput lijevo i desno pojmovima relativnim u protoku kao što su inline i block start ili end. To omogućuje da se jedan stilski list prilagodi jezicima koji se pišu zdesna nalijevo i vertikalnim načinima pisanja bez pravila grananja. Prednosti su bolja globalizacija, smanjeno dupliciranje pravila i otpornije komponente. Kompromisi uključuju mentalnu promjenu tijekom usvajanja i povremene praznine u svojstvima dugog repa. Prednost margin-inline, padding-blocki inset-inline-start za razmak i pozicioniranje kako bi se postigli dosljedni rasporedi na svim lokacijama.

Odgovorite s primjerima

.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }

7) Kada biste koristili `clamp()` i moderne jedinice za prikaz ( `svh`, `lvh`, `dvh` ) za vrstu tekućine i razmak?

Koristiti clamp(min, preferred, max) kada želite vrijednosti koje se glatko skaliraju s rastom viewporta, ali nikada ne prelaze razumna ograničenja. Ovo je idealno za tipografiju, padding i hero sekcije. Moderne viewport jedinice adresiraju chrome korisničkog sučelja mobilnog preglednika, pružajući stabilne visine za sekcije preko cijelog zaslona. Prednosti uključuju manje medijskih upita, dosljedan ritam i poboljšanu pristupačnost u kombinaciji s remNedostatak je potreba testiranja na više uređaja kako bi se potvrdila vizualna namjera i sigurne mete dodira.

Odgovorite s primjerima

:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }

8) Što je kontekst slaganja i kako ga z-index i faktori pozicioniranja stvaraju ili izoliraju?

Kontekst slaganja je izolirani opseg slikanja u kojem se usporedbe z-indexa vrše samo među srodnim elementima unutar istog konteksta. Novi konteksti nastaju iz korijenskog elementa, pozicioniranih elemenata s z-index osim autoi određena svojstva kao što su transform, opacity < 1, filteri position: fixedNjihovo razumijevanje objašnjava uobičajene probleme s "z-indexom koji ne radi" gdje dijete ne može nadmašiti sadržaj izvan njegovog konteksta. Prednost je enkapsulacija; opasnost je slučajna izolacija koja sprječava namjeravana preklapanja.

Odgovorite s primjerima

.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }

9) Je li izvorno CSS ugniježđivanje spremno za produkciju i kako biste migrirali s preprocesora?

Izvorno gniježđenje je široko podržano i smanjuje ponavljanje kolokacijom odnosa pravila uz očuvanjeping selektori kratki. Migracija bi trebala prvo dati prioritet komponentama, zamjenjujući duboke lance potomaka s jednom ili dvije razine ugniježđivanja i uklanjajući konstrukcije samo za predprocesor poput miksina. Prednosti uključuju manje pakete i poboljšanu mapu DevToolsa.ping; nedostaci uključuju iskušenje prekomjernog ugniježđivanja, što povećava specifičnost i otežava ponovnu upotrebu. Uspostavite zaštitne ograde: ograničite dubinu, zadržite kuke temeljene na klasama i kombinirajte s @layer za kontrolu redoslijeda nadjačavanja.

Odgovorite s primjerima

.card {
    display:grid; gap:.75rem;
    & h3 { margin-block:.5rem; }
    & .actions { display:flex; gap:.5rem; }
    & .actions > button:hover { text-decoration:underline; }
}

10) Možete li koristiti upite u kontejnerskom stilu i koje su njihove praktične prednosti?

Upiti stila omogućuju komponentama da se prilagode izračunatim stilovima svog spremnika, kao što je token gustoće ili varijanta teme, bez provlačenja dodatnih naziva klasa kroz DOM. To omogućuje dizajnerskim sustavima prebacivanje između kompaktnih i udobnih načina rada ili svijetlih i tamnih naglasaka po spremniku. Prednosti su odvojene komponente i jasnije granice; nedostaci uključuju potrebu za pažljivim imenovanjem tokena, dokumentiranim zamjenskim opcijama i namjernim postavljanjem spremnika. Koristite ih za izražavanje stanja kao podataka, a ne kao krhke strukturne selektore.

Odgovorite s primjerima

/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }

/* Child adapts when the container declares compact density */
@container style(--density: compact) {
    .item { padding:.5rem; gap:.5rem; }
}

11) Koji su faktori performansi važni za CSS i kako izbjeći probleme s izgledom?

Performanse CSS-a ovise o tome koliko često preglednik mora ponovno izračunati stil, izračunati rasporedi prebojiti ili mješavina slojeva. Do preklapanja izgleda dolazi kada isprepletena čitanja i pisanja u svojstva koja utječu na izgled prisiljavaju ponovljena preoblikovanja. Disciplinirani pristup je minimiziranje složenosti selektora, održavanje niske specifičnosti i animiranje samo svojstava prilagođenih kompozitoru. Grupno čitanje DOM-a prije pisanja i korištenje ograničenja za ograničavanje radijusa eksplozije.

Odgovorite s primjerima

preferiraju transform i opacity za animacije; izbjegavajte animiranje width/height/top/left.
Korak po korak do prijave content-visibility: auto dijelovima izvan ekrana i pružaju contain-intrinsic-size.
Koristiti will-change štedljivo promovirati slojeve samo za dugotrajne animacije.
Zamijenite duboke potomske selektore s hookovima jedne klase kako biste smanjili ponovno izračunavanje stila.

.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }

12) Koje CSS značajke podržavaju pristupačnost odmah po instalaciji? Navedite prednosti i primjere.

CSS ne može zamijeniti semantički HTML ili ARIA, ali poboljšava vidljivost fokusa, sigurnost kretanjai strategije kontrasta, :focus-visible pseudo-klasa otkriva fokus kada se otkrije modalitet tipkovnice, sprječavajući vizualnu buku za korisnike miša, a istovremeno čuvajući znakove za korisnike tipkovnice. Medijske značajke kao što su prefers-reduced-motion omogućuju pristojne rezervne uzorke, dok pažljivi dizajn tokena boja podržava dovoljan kontrast. Prednost su uključive zadane postavke za različite korisničke postavke; ograničenje je što semantika i navigacija tipkovnicom moraju biti osigurane označavanjem i skriptiranjem.

Odgovorite s primjerima

:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .parallax, .video-bg { animation: none; transition: none; }
}

13) Različiti načini uključivanja CSS-a i prednosti ili nedostaci svakog pristupa.

Postoji više strategija uključivanja, svaka s različitim karakteristikama koje utječu na predmemoriranje, kritični put i održivost. Vanjski stilski listovi odvajaju brige i koriste prednosti predmemoriranja preglednika; <style> prikladno je za kritična pravila koja se moraju učitati s HTML-om; inline style="" Atributi su najvišeg prioriteta, ali štete ponovnoj upotrebi i povećavaju specifičnost. Odabir prave vrste smanjuje dupliciranje korisnog sadržaja uz očuvanje ergonomije programera.

Prednosti i nedostaci (usporedna tablica)

način	Prednosti	Nedostaci	Tipična upotreba
Vanjski stilski list	Predmemoriranje preglednika; dijeljeno na više stranica	Dodatni HTTP zahtjev	Globalni sustav dizajna
U redu `<style>`	Uklanja zahtjeve; idealno za kritični CSS	Teže je upravljati u velikim razmjerima	Stilovi iznad preklopa
U redu `style=""`	Neposredna i najviša specifičnost	Bez ponovne upotrebe; HTML sa šumom	Jednokratna poništavanja

Odgovorite s primjerima

<link rel="stylesheet" href="/hr/assets/app.css" />
<style>/* minimal critical rules for LCP elements */</style>
<div class="btn" style="--danger: #b00020">Delete</div>

14) Koja je razlika između `relative`, `absolute`, `fixed`i `sticky` pozicioniranje? Navedite smjernice za slučaj upotrebe.

Pozicioniranje određuje kako se elementi postavljaju u tijek i kako međusobno djeluju sa scrollom i precima. relative održava prirodni tijek, ali pomiče vizualni okvir; često se koristi za uspostavljanje konteksta sidrenja. absolute uklanja element iz toka, pozicionirajući ga u odnosu na najbližeg pozicioniranog pretka, što daje preciznost nauštrb responzivnosti. fixed prikvači elemente na prikaz, što je idealno za trajne trake, ali mora uzeti u obzir tipkovnice na zaslonu i sigurna područja. sticky prebacuje se između statičkog i fiksnog načina rada ovisno o pragovima pomicanja, pružajući zaglavlja odjeljaka i indekse unutar stranice.

Odgovorite s primjerima

.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }

15) Koji čimbenici oblikuju održivu CSS arhitekturu (BEM, ITCSS, uslužni programi, slojevi) i kakav je životni ciklus stila komponente?

Održiva arhitektura uravnotežuje specifičnost discipline, predvidljivo raslojavanje, i stabilan imenovanjaBEM pruža eksplicitne hooks-ove, ITCSS uređuje pravila od resetiranja niske razine do uslužnih programa visoke razine, pristupi koji daju prednost uslužnim programima ubrzavaju iteraciju s ograničenim primitivima i @layer formalizira redoslijed nadjačavanja u cijeloj kodnoj bazi. Životni ciklus komponente obično počinje definicijom tokena, nastavlja se do osnovnih pravila i pravila komponenti, dodaje varijante i stanja te završava politikama zastare koje izbjegavaju promjene koje uzrokuju probleme. Prednost je dosljedno ponašanje u svim timovima; kompromis je unaprijed planiranje i upravljanje.

Odgovorite s primjerima

Tokeni u :root (razmak, boja, radijus).
Komponente smještene u @layer components s selektorima jedne klase.
Varijante putem atributa podataka ili upita u stilu spremnika radi jasnoće.

@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }

16) Kako Shadow DOM utječe na CSS scoreping, i koji su različiti načini stiliziranja dijelova?

Shadow DOM enkapsulira oznake i stiliziranje, sprječavajući slučajno curenje i osiguravajući stabilnost komponenti. Autori mogu namjerno izložiti površine: ::part() cilja imenovane dijelove koje izvozi komponenta, dok ::slotted() stilovi dodijeljeni light-DOM čvorovima u utorima. Prednosti uključuju robusnu enkapsulaciju i predvidljive površine za teme; nedostaci uključuju ograničen doseg do unutarnjih dijelova osim ako dizajner komponenti ne osigura dijelove, te potrebu za dokumentiranjem tih dijelova za potrošače.

Odgovorite s primjerima

/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }

17) Koje su karakteristike CSS box modela i zašto `box-sizing: border-box` stvar?

Model kutije opisuje kako ukupna veličina elementa proizlazi iz sadržaj, ispuna, obrubi maržaS zadanim content-box, proglašen width isključuje padding i rub, što može uzrokovati iznenađenja zbog prelijevanja i složene izračune. Usvajanje border-box uključuje padding i obrub unutar deklarirane širine i visine, što čini matematiku mreže i dimenzioniranje komponenti predvidljivijim. Prednost su jednostavniji mentalni modeli i manje grešaka u rasporedu; nedostatak je što miješanje modela unutar sustava može zbuniti suradnike. Standardizirajte u korijenu i otvoreno dokumentirajte iznimke.

Odgovorite s primjerima

*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }

18) Gdje biste koristili `@supports` za progresivno poboljšanje i koje su prednosti?

@supports Omogućuje detekciju značajki u CSS-u, što omogućuje funkcioniranje osnovne linije svugdje s uvjetnim poboljšanjima gdje su dostupna. Ovaj obrazac smanjuje rizik pri usvajanju modernih značajki kao što su upiti kontejnera, :has()ili podmreže. Glavne prednosti su graciozna degradacija i jasniji putovi migracije; nedostaci uključuju održavanje dvostrukih putova koda neko vrijeme. Prvo strukturirajte osnovno ponašanje, a zatim napredno ponašanje omotajte unutar ciljanog @supports blokovi kako naslijeđena okruženja ne bi nazadovala.

Odgovorite s primjerima

.card { display: block; }
@supports (display: grid) {
     .card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

19) Koje CSS jedinice trebate odabrati i koja je razlika među njima?

Izbor jedinice utječe na skaliranje, čitljivost i pristupačnost. rem prilagođava se veličini korijenskog fonta, što ga čini idealnim za globalni tip i razmak; em skalira se s trenutnim elementom, što je korisno unutar komponenti, ali se može neočekivano složeno kombinirati. ch odražava širinu glifa "0" i izvrstan je za mjeru (duljinu linije). px je poravnat s pikselima uređaja i siguran za tanke linije, ali ne odgovara korisničkim postavkama. Jedinice visine linije poput lh i rlh pomažu u održavanju vertikalnog ritma povezivanjem razmaka s tipografskom mrežom.

Odgovorite s primjerima

Koristiti max-width: 65ch za čitljive odlomke.
Postavi globalni razmak kao višekratnike od rem poštovati korisničke preferencije.
Koristiti em za unutarnje dijelove komponenti kao što su ikone koje se skaliraju s veličinom fonta.

.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }

20) Pomažu li CSS brojači sa strukturiranim sadržajem i koje su njihove prednosti i nedostaci?

CSS brojači omogućuju automatsko numeriranje bez mijenjanja semantičkog HTML-a, što je vrijedno za naslove, slike i pravne dokumente. Prednosti uključuju čisto označavanje i fleksibilnost u prezentaciji na različitim lokacijama ili odjeljcima. Nedostaci su potencijalni nedostaci u pristupačnosti ako numeriranje prenosi bitno značenje koje se ne odražava u DOM strukturi ili ga ne najavljuje pomoćna tehnologija. Koristite brojače za prezentacijsko numeriranje uz osiguranje da je temeljna hijerarhija ispravna i navigabilna.

Odgovorite s primjerima

article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }

21) Kada biste trebali animirati pomoću CSS-a i koja su svojstva najsigurnija za performanse?

Animacije su najotpornije kada rade na svojstvima prilagođenim kompozitoru koja izbjegavaju ponovno slanje i ponovno crtanje. CSS se ističe u deklarativnim, stanjima vođenim prijelazima gdje preglednik može optimizirati raspoređivanje kadrova. Najsigurniji izbori su transform i opacity, koji se obično izvode u niti kompozitora i minimiziraju rad glavne niti. Koristite CSS za mikrointerakcije, prijelaze pri zadržavanju miša i jednostavne efekte ulaska. Izbjegavajte animiranje svojstava koja utječu na izgled, kao što su width, height, topi left jer pokreću ponovni izračun rasporeda. Kada su promjene geometrije bitne, razmislite o iluzijama temeljenim na transformaciji ili nježnom spajanju max-height prijelazi s upravljanjem prelijevanjem i pažljivim alternativama pristupačnosti.

Odgovorite s primjerima

.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
   transform: translateY(0);
   opacity: 1;
   transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
   .dialog { transition: none; }
}

22) Može li CSS pomoći responzivnim slikama i koji su različiti načini pristupa?

HTML posjeduje intrinzični odabir slika putem srcset i sizes, ali CSS ostaje važan za dekorativne slike, umjetničko usmjeravanje pozadina i prilagođavanje objekata. Koristite image-set() ponuditi više rezolucija za pozadinske slike i preferirati object-fit i object-position za kontrolu zamijenjenih elemenata unutar njihovih okvira. Kombinirajte ih s upitima za spremnike ili medije kako biste prilagodili obrezivanje, gustoću ili žarišne točke. Prednost je precizna vizualna kontrola bez širenja oznaka; nedostatak je što CSS pozadinske slike nemaju intrinzično pregovaranje o veličini i ne objavljuju ih pomoćne tehnologije, pa bi slike sadržaja trebale ostati u HTML-u.

Prednosti i nedostaci (usporedna tablica)

Pristup	Karakteristike	Prednosti	Nedostaci	Tipična upotreba
HTML `srcset/sizes`	Intrinzična selekcija	Ispravna semantika; najbolje performanse	Zahtijeva promjene oznaka	Slike sadržaja
CSS `image-set()`	Skupovi pozadinske rezolucije	Jednostavna zamjena po točki prekida	Nema intrinzičnog dimenzioniranja	Dekorativne pozadine
`object-fit` / `position`	Box kontrola zadržavanja	Konzistentna urodaping	Nije za pozadinske slike	Minijature, avatari

Odgovorite s primjerima

.hero {
	background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
	background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }

23) Je li JavaJe li tamni način rada bez skripti izvediv i koji ga čimbenici čine robusnim?

A JavaTamni način rada bez skripti moguć je kombiniranjem prilagođenih svojstava s prefers-color-scheme medijsku značajku i opcionalni HTML atribut za korisnička poništavanja. Definirajte semantičke tokene u korijenu, navedite tamne varijante unutar medijskog upita i omogućite [data-theme] nadjačavanje kako bi se poštovao eksplicitni izbor korisnika ili brendiranje poduzeća. Ovaj pristup minimizira složenost, smanjuje treperenje i održava kaskadu autoritativnom. Ograničenje je oslanjanje na sistemske postavke kada nema eksplicitnog nadjačavanja. Dokumentirajte tokene, osigurajte dovoljan kontrast i testirajte obrise i stanja fokusa u oba načina rada.

Odgovorite s primjerima

:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }

24) Postoje li nedostaci dubokog ugniježđivanja selektora i visoke specifičnosti, a koje su prednosti pristupa niske specifičnosti?

Duboko ugniježđivanje i visoka specifičnost čine stilove krhkim, usporavaju refaktoriranje i povećavaju rizik od nenamjernih nadjačavanja. Takvi selektori čvrsto povezuju CSS sa strukturom dokumenta, što povećava troškove održavanja kada se označavanje razvija. Pristup niske specifičnosti favorizira hooks-ove s jednom klasom, ravnu arhitekturu i @layer redoslijed za predvidljivo upravljanje nadjačavanjima. Prednosti uključuju jasnije vlasništvo, brže renderiranje zbog jednostavnijeg usklađivanja i lakše sastavljanje među timovima. Postavite ograničenja dubine ugniježđivanja, izbjegavajte kvalificiranje klasa s nazivima elemenata kada to nije potrebno i osigurajte uslužne programe za evakuacijske izlaze.

Odgovorite s primjerima

/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }

/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }

25) Koja metodologija - BEM, ITCSS ili utility-first - odgovara različitim timovima i koje su prednosti i nedostaci?

Odabir metodologije ovisi o veličini tima, kulturi pregleda i volatilnosti proizvoda. DOBRO pruža eksplicitne, čitljive hooke-ove koji se mogu skalirati u velikim timovima. ITCSS organizira kodnu bazu od resetiranja niske razine preko objekata i komponenti do uslužnih programa, usklađujući se s kaskadom. Utility-first ubrzava isporuku s ograničenim primitivima i favorizira kompoziciju u odnosu na prilagođene selektore. Hibridi su uobičajeni: ITCSS za redoslijed, BEM za imenovanje gdje je potrebno i uslužni programi za jednokratne prilagodbe. Kompromisi uključuju detaljnost (BEM), unaprijed planiranje (ITCSS) i potencijalno širenje klasa (prvo korisnost).

Razlike (tablica usporedbe)

način	Karakteristike	Prednosti	Nedostaci	Najbolje odgovara
DOBRO	.block__elem – imenovanje modova	Predvidljive udice	Opširni selektori	Veliki timovi, dizajnerski sustavi
ITCSS	Slojevita arhitektura	Obriši nadjačavanje narudžbe	Planiranje općih troškova	Višetimski monorepozitorij
Utility-first	AtomIC klase	Brzina, konzistentnost	Rizik od odljeva učenika iz razreda	Brzi prototipping, aplikacije

26) Objasnite životni ciklus tokena za razmak i tipografiju od dizajna do koda s primjerima.

Životni ciklus tokena započinje u dizajnu s izborima skale, omjerima i ciljevima pristupačnosti. Oni postaju imenovana, verzionirana prilagođena svojstva koja predstavljaju semantiku vrste (na primjer, --space-2, --font-scale-1 ) umjesto sirovih vrijednosti. Tokeni se prenose u osnovne stilove, zatim u komponente i varijante te se na kraju ukidaju ili preusmjeravaju putem aliasa kako se sustavi razvijaju. Prednosti uključuju dosljedan ritam, manje razlike i poboljšanu međuplatformsku parnost; nedostaci uključuju početne troškove upravljanja i potrebu za jasnom dokumentacijom. Tretirajte tokene kao javne API-je: definirajte raspone, mapirajte ih na smjernice za korištenje i navedite bilješke o migraciji.

Odgovorite s primjerima

:root{
	--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
	--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }

/* deprecation alias */
:root{ --space-small: var(--space-2); }

27) Kako `:focus-visible`, `:focus-within`i `:target` razlikuju se i koje prednosti svaki od njih pruža?

Ovi selektori adresiraju različite karakteristike interakcije i navigacije. :focus-visible prikazuje fokus samo kada način unosa sugerira navigaciju tipkovnicom, smanjujući distorzijutracprstenovi za korisnike miša uz podršku pristupačnosti. :focus-within podudara se s kontejnerom kada bilo koji potomak ima fokus, omogućujući grupirano isticanje za kompozite poput polja obrasca. :target odgovara elementu na koji se poziva URL fragment, osnažujući poveznice za preskakanje i navigaciju unutar stranice bez skripti. Pažljivo kombinirani, poboljšavaju orijentaciju, smanjuju kognitivno opterećenje i podržavaju učinkovite tijekove rada s tipkovnicom.

Odgovorite s primjerima

:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }

28) Koje su prednosti i nedostaci `content-visibility` i CSS ograničenja na velikim dokumentima?

content-visibility: auto odgađa renderiranje elemenata izvan zaslona dok se ne približe prikazu, što dramatično smanjuje početne troškove renderiranja na dugim feedovima. Dodatno ograničavanje ( contain: layout paint style ) ograničava utjecaj podstabla na ostatak stranice, smanjujući opseg preoblikovanja i ubrzavajući ponovljena ažuriranja. Prednosti su poboljšana responzivnost i smanjena upotreba memorije; nedostaci uključuju potencijalne efekte skočnih prozora ako su intrinzične veličine nepoznate i složenost kada JavaSkripta mora mjeriti veličine. Ublažite problem dodavanjem contain-intrinsic-size i mjerenje samo kada je potrebno.

Odgovorite s primjerima

.feed-item{
	content-visibility: auto;
	contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
	contain: layout paint style;
}

29) Kako izgraditi responzivnu mrežu s minimalnim točkama prekida koristeći `minmax()` i `auto-fit/auto-fill`?

Otporan raspored može se postići definiranjem fleksibilnog tracks koji se šire do maksimalne širine, a zatim se automatski omotavaju. repeat(auto-fit, minmax(min, 1fr)) stvara onoliko stupaca koliko stane, sažimajući ih prazne tracks kako bi se izbjegli neugodni razmaci. To smanjuje oslanjanje na eksplicitne točke prekida, a istovremeno čuva skladnu gustoću na svim veličinama zaslona. Pristup je idealan za galerije, kartice i popise proizvoda. Osigurajte udobne minimalne vrijednosti (na primjer, 16rem ) i oslanjaju se na razmak između praznina kako bi održali ritam.

Odgovorite s primjerima

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

30) Koji čimbenici određuju kada odabrati `gap` u odnosu na margine za razmak između stavki?

gap je razmak svjestan protoka koji izvorno radi s Flexboxom i Gridom, primjenjujući simetrično odvajanje bez rubnih slučajeva koji urušavaju margine. Idealan je za unutar komponente razmak jer ne utječe na poravnanje prvog/zadnjeg djeteta niti zahtijeva promjene smjera u rasporedima s desna na lijevo. Margine su poželjnije za vanjski razmak koji je dio javnog API-ja komponente ili kada razmak mora komunicirati s kontekstima koji nisu Flex/Grid. Odaberite na temelju opsega, vlasništva i semantike izgleda kako biste izbjegli iznenađujuća preklapanja i kako biste pravila nadjačavanja sveli na minimum.

Razlike (tablica usporedbe)

Kriterij	`gap`	Margine
Djelokrug	Interno u kontejneru izgleda	Vanjski između braće i sestara i susjeda
usmjerenost	Logično i simetrično	Može zahtijevati prilagodbe RTL-a
Ponašanje pri urušavanju	Nije primjenjivo	Podložno padu marže
Najbolja upotreba	Razmak djece u fleksibilnom/mrežnom elementu	Vanjski razmak komponenti i raspored kontracts

Odgovorite s primjerima

.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */

31) Koji su nedostaci oslanjanja na `!important`, a koje su sigurnije alternative?

Pretjerano korištenje !important zaobilazi prirodni životni ciklus kaskade, što prikriva namjeru, blokira legitimna poništavanja i prisiljava buduće suradnike da dodatno pojačaju specifičnost. Također potkopava mogućnost testiranja jer pravila postaju imuna na uređenje i @layer strategije. Profesionalna alternativa je osmišljavanje predvidljivih puteva nadjačavanja: smanjenje specifičnosti selektora, postavljanje pravila u namjenski sloj uslužnih programa ili promjena redoslijeda izvora pomoću @layer umjesto pretvaranja deklaracija u oružje. Rezerva !important za namjerno korisnički vođene slučajeve kao što su uslužni programi visokog kontrasta ili prisilne vidljivosti koji djeluju kao dokumentirani izlaz za bijeg.

Odgovorite s primjerima

/* Deliberate, documented utility only */
@layer utilities {
	.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}

/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }

32) Koje vrste selektora treba izbjegavati zbog performansi ili održivosti i zašto?

Selektori koji se čvrsto vežu za dubinu dokumenta ili atribute u cijelom DOM-u su rizični. Dugi lanci potomaka povećavaju troškove podudaranja i stvaraju krhke ovisnosti o označavanju. Široki selektori atributa kao što su [class*="btn"] or [data-*] bez scoping može skenirati velika podstabla. Prekvalificirani selektori poput ul.nav > li > a.link smanjiti mogućnost ponovne upotrebe i zakomplicirati nadjačavanja. Održivi pristup preferira hooks-ove jedne klase, atribute stanja s jasnim kontracts (na primjer, [data-state="open"] ) i kratke veze ( > , + ) unutar granica komponenti. To poboljšava čitljivost, smanjuje kaskadne sukobe i ubrzava refaktoriranje.

Odgovorite s primjerima

/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }

/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }

33) Kada biste trebali odabrati `@layer` komunalne usluge u odnosu na varijante komponenti i koje su prednosti?

Uslužni programi ekspres jednokratne prilagodbe kao što su razmak, prikaz ili poravnanje koji bi trebali biti nadjačani bez povećanja specifičnosti. Varijante komponenti izražavaju ponovljiva stanja ili načini rada koji pripadaju API-ju komponenti. Uslužni programi su izvrsni tijekom sastavljanja u kodu aplikacije jer su predvidljivi i ne zahtijevaju uređivanje stilskog lista komponente. Varijante su superiorne kada se isto stanje ponavlja i moraju se dokumentirati i testirati kao dio sustava dizajna. Uravnotežena arhitektura smješta uslužne programe kasno u redoslijedu slojeva i održava varijante komponenti niske specifičnosti unutar sloja komponenti.

Odgovorite s primjerima

@layer reset, base, components, utilities;

/* Variant: part of the API */
@layer components {
	.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}

/* Utility: composition escape hatch */
@layer utilities {
	.mt-4 { margin-block-start: 1rem; }
	.inline { display:inline; }
}

34) Može li Grid zamijeniti svu upotrebu Flexboxa ili postoje razlozi za zadržavanje oba, utemeljeni na razlikama?

Grid i Flexbox rješavaju ortogonalne probleme. Grid pruža dvodimenzionalnu kontrolu s eksplicitnim track definicije, što složene okvire stranica, nadzorne ploče i galerije kartica čini jednostavnima. Flexbox se ističe u distribuciji po jednoj osi, intrinzičnom dimenzioniranju duž glavne osi i poravnanju unutar redaka ili stupaca, što je idealno za alatne trake, izbornike i čipove. Pokušaj forsiranja Grida svugdje žrtvuje ergonomsko ponašanje poravnanja, dok forsiranje Flexboxa za makro raspored uvodi krhke omotače. Zreli sustavi namjerno kombiniraju oboje, ponekad unutar iste komponente, odabirući mehanizam čije karakteristike odgovaraju problemu.

Razlike (tablica usporedbe)

Kriterij	rešetka	flex box
Dimenzija	Dvodimenzionalan tracks	Jednodimenzionalni tok
snaga	Eksplicitna područja, praznine, podmreža	Distribucija, poravnanje, preuređenje
Najbolje korištenje	Okviri stranica, nadzorne ploče	Alatne trake, navigacije, popisi čipova

Odgovorite s primjerima

.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }

35) Koje su prednosti i nedostaci korištenja `aspect-ratio` u odnosu na hakove s paddingom?

aspect-ratio nudi deklarativan, samodokumentirajući način održavanja oblika za kartice, medije i sličice bez omotačkih elemenata ili hakova pseudoelemenata. Čisto se integrira s prilagođavanjem objekata i predvidljivo radi u Grid i Flex izgledima. Glavni nedostaci su praznine u starijim preglednicima u starijim okruženjima i potreba za preispitivanjem prethodnog CSS-a temeljenog na hakovima. Hakovi s padding-topom ostaju rezerva za vrlo stare motore, ali povećavaju složenost DOM-a i smanjuju jasnoću. Preferirajte aspect-ratio radi održavanja i zatvorite ga s @supports samo ako je naslijeđeno pokriće kontratracuistinu potrebno.

Odgovorite s primjerima

.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
    .thumb-wrap { position: relative; }
    .thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
    .thumb { position:absolute; inset:0; }
}

36) Kako biste izradili otporni ljepljivi zaglavlje koje poštuje sigurna područja i mobilne prikaze?

Otporni zaglavak uravnotežuje position: sticky za sidra na razini presjeka s position: fixed samo kada dizajn zahtijeva globalnu perzistenciju. Umetci sigurnog područja sprječavaju preklapanje sa sustavnim korisničkim sučeljem na uređajima s urezima, a moderne jedinice za prikaz poput dvh Izbjegavajte sažimanje kada se Chrome u pregledniku prikaže ili sakrije. Strategija uključuje dodjeljivanje jasnog konteksta slaganja, rezerviranje prostora za sprječavanje pomicanja rasporeda i pružanje postavki kretanja za efekte ulaska. Testiranje na različitim tipkovnicama i u vodoravnoj orijentaciji je ključno, jer virtualne tipkovnice mogu zakloniti fiksne elemente ako se ne obrađuju.

Odgovorite s primjerima

.header {
	position: sticky;
	top: 0;
	padding-top: env(safe-area-inset-top);
	background: var(--bg);
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }

Razmatranja (brza tablica)

Faktor	Preporuka
Sigurna područja	Koristiti `env(safe-area-inset-*)`
Vidik	preferiraju `dvh` za regije pune visine
Z-indeks	Izradite jednu skalu prekrivanja i dokumentirajte je

37) Koja je razlika između skaliranja gustoće i skaliranja veličine komponenti i kada bi se svako od njih trebalo koristiti?

Skaliranje gustoće mijenja razmak, praznine i visina retka dok keeping konstantne veličine fonta, čime se stvaraju kompaktne, udobne ili prostrane varijante bez promjene tipografske hijerarhije. Skaliranje veličine mijenja sama tipografska skala, pomicanje naslova, teksta tijela i kontrola u veće ili manje korake. Koristite skaliranje gustoće za korisnička sučelja poduzeća gdje gustoća informacija varira ovisno o zadatku; koristite skaliranje veličine kako biste odgovorili na udaljenost uređaja, potrebe pristupačnosti ili zahtjeve robne marke. Tretirajte oboje kao tokene s dokumentiranim rasponima kako biste osigurali dosljednost na svim površinama.

Odgovorite s primjerima

/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }

38) Koji nedostaci proizlaze iz velikih globalnih resetiranja i koje su sigurnije alternative?

Agresivna resetiranja mogu nenamjerno ukloniti korisne zadane postavke poput obrisi fokusa, semantike popisa i mogućnosti kontrole obrasca. To šteti pristupačnosti i prisiljava na redundantnu ponovnu implementaciju izvornih ponašanja. Sigurnije alternative uključuju moderne normalizacije koje ukroćuju nedosljednosti uz očuvanje semantike i resetiranja s ograničenim dosegom primijenjeno putem @layer na komponente koje zaista zahtijevaju prazan list. Dokumentirajte politiku resetiranja, eksplicitno vratite kritične značajke poput :focus-visiblei izbjegavajte poništavanje elemenata čije zadane vrijednosti prenose značenje, kao što je b, strongi em.

Odgovorite s primjerima

@layer reset {
	*,*::before,*::after { box-sizing: border-box; }
	:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */

39) Kako učinkovito otklanjati greške u složenim kaskadnim problemima koristeći DevTools i moderne CSS značajke?

Učinkovito otklanjanje pogrešaka započinje izoliranjem elementa u DevToolsima i pregledom kompjutorska okno za prikaz konačne vrijednosti svojstava i njihovih izvora. Zatim provjerite Stilovi redoslijed i specifičnost pravila u oknu kako bi se razumjelo zašto je pravilo pobijedilo, obraćajući pozornost na @layer redoslijed i miješa li se novi kontekst slaganja ili sadržavanja. Togglpravila za validaciju hipoteza i koristite kaskadni prikaz slojeva (gdje je dostupan) za vizualizaciju prioriteta slojeva. Dodajte privremene obrise za otklanjanje pogrešaka i razmotrite zastavice značajki putem @supports prepoloviti probleme selektivnim onemogućavanjem naprednih putova.

Odgovorite s primjerima

/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }

/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}

40) Gdje se stilovi ispisa i medijski upiti uklapaju u profesionalni CSS cjevovod i koje su njihove prednosti i nedostaci?

Stilovi ispisa ostaju ključni za proizvode s puno dokumentacije, fakture i pravne predmete. Profesionalni cjevovod uključuje minimalan @media print odjeljak koji uklanja nebitni krom, postavlja mjeru za čitanje i osigurava da je korištenje boja čitljivo na uređajima u sivim tonovima. Prednosti uključuju poboljšanu kvalitetu arhiviranja i povjerenje korisnika; nedostaci uključuju dodatno održavanje i potrebu za revizijom sadržaja koji je inače interaktivan. Pravila ispisa neka budu vođena tokenima, izbjegavajte apsolutno pozicioniranje osim zaglavlja i podnožja te testirajte uobičajene preglednike i generatore PDF-ova kako biste spriječili anomalije paginacije.

Odgovorite s primjerima

@media print {
	nav, .ads, .controls { display: none !important; }
	article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
	a[href]::after { content: " (" attr(href) ")"; }
	img { break-inside: avoid; }
}

41) Koja strategija stvara predvidljiv sustav preklapanja i kako biste trebali upravljati `z-index` mjerilo?

Predvidljiv sustav prekrivanja tretira slojevitost kao dokumentiranu prijevarutract umjesto ad-hoc brojeva. Definirajte malu, imenovanu skalu (na primjer, osnovna, podignuta, prekrivna, modalna, toast) i dodijelite komponente slojevima putem varijabli ili klasa pomoćnih programa. Držite svaki sloj unutar vlastitog konteksta slaganja samo kada je potrebna izolacija i izbjegavajte slučajne kontekste iz transform or filter osim ako nije namjerno. Glavna prednost je što inženjeri mogu razmišljati o sukobima bez pokušaja i pogrešaka; nedostatak je skromna početna taksonomija. Uparite skalu s dizajnerskim tokenima i lint-om za vrijednosti izvan raspona kako biste spriječili pomicanje.

Ljestvica prekrivanja (tablica usporedbe)

Red	Svrha	Tipičan `z-index`	Bilješke
Baza	Redovni sadržaj	0	Izbjegavajte stvaranje novih konteksta
Uzdignut	Ljepljivi zaglavlja, ladice	10-100	Održavajte dosljednost unutar ljuske
Prekriti	Pozadine, platna	900	Štit za klik preko cijele stranice
kapital	Dijalozi, birači	1000	Položaj `fixed`zarobiti fokus
Tost	Obavijesti	1100	Neblokirajuće; vremenski ograničeno uklanjanje

Odgovorite s primjerima

:root{
	--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }

42) Kako bi izvorne kontrole obrazaca trebale biti odgovorno stilizirane i koje su prednosti i nedostaci uobičajenih tehnika?

Odgovorno stiliziranje obrazaca poštuje semantiku, a istovremeno poboljšava pristupačnost. Započnite očuvanjem ponašanja tipkovnice i čitača zaslona, a zatim poboljšajte slojeve: koristite accent-color za provjerljive unose koji će biti usklađeni s markom bez zamjene kontrola; primijenite appearance štedljivo za normalizaciju nedosljednih korisničkih sučelja; i ciljati kontrole prijenosa putem ::file-selector-buttonPrednost su pristupačne, dosljedne kontrole s minimalnim JavaSkripta; nedostaci uključuju nijanse više preglednika i iskušenje zamjene kontrola u cijelosti. Dokumentirajte stanja fokusa, stanja pogrešaka i onemogućena stanja kao dio API-ja komponente kako biste izbjegli ad-hoc nadjačavanja.

Odgovorite s primjerima

/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }

/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }

/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}

43) Koje strategije postoje za kritični CSS i dijeljenje koda, te koje su prednosti i nedostaci?

Kritični CSS poboljšava najveće iscrtavanje sadržaja umetanjem pravila potrebnih za sadržaj iznad preklopa, dok ostatak odgađa. Code-razdvajanje dijeli stilski list prema ruti, značajki ili komponenti. Izmjereni pristup kombinira mali kritični dio sa slojevitim vanjskim paketima radi održavanja. Prednosti su brže uočeno učitavanje i manji početni korisni tereti; nedostaci uključuju složenost izgradnje i rizik dupliciranja ako se ne deduplicira tijekom kompajliranja. Preferirajte determinističko slojevitost ( @layer ) i konvencije imenovanja kako bi nadjačavanja ostala stabilna u svim dijelovima.

Strategije učitavanja (tablica usporedbe)

Strategija	Pogodnosti	Nedostaci	Tipična upotreba
Ugrađeno kritično `<style>`	Brži LCP; bez zahtjeva	Teže za održavanje	Školjka iznad pregiba
Asinkroni vanjski CSS	Može se predmemorirati; modularno	Bljesak rizika od nestiliziranog sadržaja	Rute aplikacije
Paketi podijeljeni po medijima	Uvjetno učitavanje	Složenost; troškovi testiranja	Ispis, visoka dpi, tamni način rada

Odgovorite s primjerima

<link rel="preload" href="/hr/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/hr/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>

44) Koje su moderne CSS opcije boja ( `color-mix`, relativna sintaksa boja, perceptivni prostori) i kada ih treba koristiti?

Moderni CSS podržava sastavljanje boja tijekom izvođenja s color-mix() i prilagođavanje komponenti putem relativne sintakse boja, omogućujući dinamičko tematiziranje bez predkompilacije. Perceptivni prostori boja poput OKLCH-a ili Laba pružaju ujednačenije prilagodbe svjetline i krome od sRGB-a, čineći prijelaze i stanja (lebdenje, onemogućeno) konzistentnijima. Primarna prednost su predvidljive promjene kontrasta i nijansi među temama; nedostaci uključuju djelomičnu podršku u starijim mehanizmima i potrebu za provjerom usklađenosti s robnom markom. Koristite miješanje tijekom izvođenja za stanja lebdenja ili naglaska i pohranite kanonske tokene u perceptivni prostor gdje je to moguće, vraćajući se na sRGB kada je to potrebno.

Odgovorite s primjerima

:root{
	--brand: oklch(60% .15 260);
	--brand-hover: color-mix(in oklch, var(--brand), black 12%);
	--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }

45) Koje tehnike stvaraju otpornu, responzivnu tipografiju i vertikalni ritam?

Otporna tipografija uravnotežuje čitljivu duljinu retka, skalabilne veličine i dosljedan razmak. Započnite s osnovnom veličinom fonta koja poštuje korisničke preferencije, a zatim koristite clamp() definirati fluidne korake ograničene razumnim granicama. Uspostaviti vertikalni ritam s lh ili fiksnu visinu korijenskog retka i ograničiti odlomke na chmjere temeljene na. text-wrap: balance može poboljšati naslove ravnomjernijom raspodjelom prekida, dok hyphens: auto i jezični metapodaci smanjuju neravne rubove. Prednosti su čitljivost i dostupnost u različitim prikazima; nedostaci uključuju potrebu za testiranjem ligatura i uravnoteženjem ponašanja s fontovima robne marke.

Odgovorite s primjerima

:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }

46) Kako se prikvači pomicanjeping i padding/margine za pomicanje surađuju kako bi poboljšale navigaciju?

Prihvat pomicanjaping stvara determinističke položaje mirovanja za karusel i sekcionirane rasporede, dok scroll-padding i scroll-margin Osigurajte da se ciljevi ispravno poravnaju ispod ljepljivih zaglavlja. Koristite scroll-snap-type na spremniku i scroll-snap-align na stavkama koje usmjeravaju ponašanje. Prednosti uključuju dosljedan osjećaj i poboljšanu navigaciju tipkovnicom s tabindex i sidra; nedostaci su potencijalna frustracija ako su točke pričvršćivanja previše agresivne ili nisu podešene za zamah na dodirnim uređajima. Osigurajte logičko punjenje za vrh prikaza kako biste izbjegli skrivanje sadržaja ispod ljepljivog korisničkog sučelja i potvrdite interakcijama tipkovnice i pokazivača.

Odgovorite s primjerima

.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */

47) Koji CSS obrasci čine tooltipove i popovere otpornima i kada je to slučaj? JavaJe li skripta još uvijek potrebna?

CSS može obraditi jednostavne, usmjeravajuće opise pomoću position, logički pomaci i ::after strijele, aktivirane :hover i :focus-visible. Koristiti inset i transformira za precizno postavljanje i @layer uslužni programi za z-uredjivanje. Za složene skočne prozore - otkrivanje sudara, premještanje strelica ili premještanje fokusaping-JavaSkripta ostaje potrebna, ali CSS i dalje definira tokene za prezentaciju. Prednost CSS-first obrazaca je malo opterećenje i elegantna degradacija; nedostatak je ograničena prilagodljivost rubovima prikaza bez logike. Uvijek osigurajte da su opisi alata dostupni tipkovnicom i da ne zaklanjaju bitne kontrole.

Odgovorite s primjerima

.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
	position:absolute; inset-block-end: 100%; inset-inline-start: 0;
	opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
	z-index: var(--z-raised);
}

48) Kako dizajnirati responzivne, čitljive tablice podataka bez pribjegavanja složenim prepisivanjima?

Responzivne tablice čuvaju semantiku, a istovremeno nude upotrebljive prikaze na uskim zaslonima. Započnite s horizontalnim pomicanjem unutar ograničenog omotača kako biste izbjegli preoblikovanje zaglavlja i odnosa. Za podatke ključ-vrijednost prebacite se na složeni izgled pomoću display: grid s imenovanim područjima ili dodajte kontrole vidljivosti stupaca za postupno otkrivanje. Prednosti uključuju očuvanu dostupnost i jednostavno održavanje; nedostaci su ograničen prostor na zaslonu i potreba za pažljivim stiliziranjem prelijevanja. Dokumentirajte koji su stupci bitni na svakoj točki prekida i preferirajte text-overflow s opisima alata za duge vrijednosti.

Pristupi (usporedba)

Tehnika	Pogodnosti	Nedostaci	Najbolje za
Omotač za horizontalno pomicanje	Čuva semantiku	Zahtijeva stiliziranje prelijevanja	Široki, gusti stolovi
Složeni raspored ključ/vrijednost	Vrlo čitljivo	Gubi izvorne značajke tablice	Specifikacije mobilnih uređaja, računi
Prekidači stupaca	Prilagođena gustoća	Zahtijeva JS ožičenje	Administratorske nadzorne ploče

Odgovorite s primjerima

.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

49) Kada načini miješanja, filteri i maske pružaju praktičnu vrijednost i koji su kompromisi?

Načini miješanja ( mix-blend-mode, background-blend-mode ), filteri ( blur, grayscale, drop-shadow ) i maske ( mask-image, mask-composite ) omogućuju efekte poput staklomorfizma, duotona i nepravokutnih otkrivanja bez uređivanja rastera. Ističu se u marketinškim površinama i naglascima na vizualnim podacima gdje je umjetnički smjer važan. Prednosti su smanjeno širenje resursa i dinamičko tematiziranje; nedostaci uključuju troškove performansi na uređajima s niskom potrošnjom energije i moguće probleme s pristupačnošću ako se smanji kontrast. Rezervirajte teške efekte za nekritične površine, testirajte utjecaj GPU-a i osigurajte rezervne opcije sa smanjenim preferencijama.

Odgovorite s primjerima

.hero::before{
	content:""; position:absolute; inset:0;
	background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
	mix-blend-mode: screen; filter: blur(20px);
}

50) Koju ulogu imaju `color-scheme` i teme korisničkog sučelja sustava igraju ulogu u kohezivnom stiliziranju u svim preglednicima?

The color-scheme Svojstvo deklarira namjeravane svijetle i tamne palete tako da se komponente korisničkog agenta (kontrole obrazaca, trake za pomicanje u nekim tražilicama) prikazuju s odgovarajućim pozadinama i bojama teksta. To smanjuje potrebu za prilagođenim skinovima kontrola i sprječava neusklađenosti kada je aktivan tamni način rada. Prednost je koherentnost s minimalnim kodom; nedostatak je što se paritet među tražilicama razvija, a prilagođeno brendiranje i dalje može zahtijevati nadjačavanja. Kombiniraj color-scheme s prilagođenim svojstvima za tokene i dopuštanjem eksplicitnih korisničkih nadjačavanja kako bi se izbjegle zamkeping korisnici u sistemskoj postavci koju nisu odabrali.

Odgovorite s primjerima

:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */

🔍 Najčešća pitanja za CSS intervju sa stvarnim scenarijima i strateškim odgovorima

1) Koja je razlika između `inline`, `inline-block`i `block` elementi u CSS-u?

Očekivano od kandidata: Anketar želi provjeriti vaše razumijevanje svojstava prikaza elemenata i kako ona utječu na modele rasporeda i okvira.

Primjer odgovora:
„U svojoj prethodnoj ulozi često sam se suočavao s nedosljednostima u rasporedu uzrokovanim nerazumijevanjem vrsta prikaza.“ block Element zauzima punu dostupnu širinu i počinje u novom retku. inline Element zauzima samo onoliko širine koliko i njegov sadržaj i ne počinje u novom retku. inline-block Element omogućuje postavljanje širine i visine poput blok elementa, ali teče u liniji poput teksta. Razumijevanje ovih razlika pomoglo mi je da precizno podesim responzivne dizajne i održim dosljedno poravnanje.

2) Kako pristupate otklanjanju pogrešaka u CSS-u u složenim izgledima?

Očekivano od kandidata: Ispitivač želi znati vaš sustavni pristup identificiranju i ispravljanju grešaka u rasporedu.

Primjer odgovora:
„Na prethodnoj poziciji slijedio sam strukturirani pristup otklanjanju pogrešaka u CSS-u. Koristio sam alate za razvojne programere preglednika za pregled izračunatih stilova i modela okvira, izolirao konfliktne selektore i korak po korak onemogućavao pravila. Također sam koristio prefikse specifične za preglednik i testirao na više uređaja. Ovaj metodični proces otklanjanja pogrešaka značajno je smanjio probleme s izgledom prednjeg dijela.“

3) Možete li objasniti kako funkcionira CSS kaskada i specifičnost?

Očekivano od kandidata: Anketar želi procijeniti vaše znanje o tome kako preglednici određuju koja CSS pravila imaju prednost.

Primjer odgovora:
„CSS kaskada je proces koji definira koja se pravila primjenjuju kada više selektora cilja isti element. Specifičnost određuje prioritet, pri čemu su inline stilovi najviši, zatim slijede ID-ovi, zatim klase, pseudoklase i na kraju elementi. Izvorni redoslijed je također važan ako je specifičnost jednaka. Poznavanje ovoga pomaže u sprječavanju nenamjernog prepisivanja stilova i potiče čišći kod.“

4) Opišite kako se nosite s responzivnim dizajnom bez prevelikog oslanjanja na frameworkove.

Očekivano od kandidata: Anketar provjerava vaše razumijevanje fleksibilnosti CSS-a i korištenja medijskih upita.

Primjer odgovora:
„U svojoj posljednjoj ulozi dizajnirao sam responzivne izglede koristeći fluidne mreže, relativne jedinice poput em i remi medijske upite za prilagodbu izgleda različitim širinama zaslona. Također sam koristio CSS Grid i Flexbox za fleksibilne rasporede. Ovaj pristup izbjegao je nepotrebne ovisnosti o okvirima, a istovremeno zadržaoping dizajn skalabilan i održiv.”

5) Kako biste optimizirali CSS za performanse i održavanje?

Očekivano od kandidata: Anketar procjenjuje vašu svjesnost o najboljim praksama za skalabilnost i učinkovitost.

Primjer odgovora:
„Na prethodnom poslu optimizirao sam CSS uklanjanjem nekorištenih stilova, kombiniranjem datoteka kako bih smanjio HTTP zahtjeve i implementacijom CSS varijabli za održavanje. Također sam usvojio BEM konvencije imenovanja kako bi kod bio organiziran i jednostavan za skaliranje. Osim toga, koristio sam moderne alate poput PostCSS-a i minifikacije kako bih poboljšao performanse.“

6) Recite mi o situaciji kada ste morali surađivati s programerima ili dizajnerima kako biste riješili sukob oko stila.

Očekivano od kandidata: Anketar želi vidjeti timski rad i komunikacijske vještine u međufunkcionalnim okruženjima.

Primjer odgovora:
„U prethodnom projektu došlo je do sukoba između očekivanja dizajna i implementacije dinamičkog obrasca od strane programera. Zakazao sam brzu sinkronizaciju s objema stranama, prikazao vizualni problem pomoću snimaka zaslona i predložio prilagodbe CSS varijabli kako bi se održala dosljednost dizajna. Ova proaktivna suradnja osigurala je vizualno usklađen rezultat bez utjecaja na performanse.“

7) S kojim ste se izazovima suočili prilikom implementacije CSS animacija ili prijelaza i kako ste ih prevladali?

Očekivano od kandidata: Anketar želi procijeniti vaše razumijevanje optimizacije performansi i renderiranja u pregledniku.

Primjer odgovora:
„U jednom projektu, animacije su uzrokovale trzanje zbog problema s preoblikovanjem. Utvrdio sam da određena CSS svojstva poput top i left su pokretali ponovne izračune rasporeda. Prešao sam na korištenje transform i opacity, koji su ubrzani GPU-om, što dovodi do glatkijih prijelaza. Također sam optimizirao trajanje animacije za prirodan osjećaj.”

8) Kako biste strukturirali CSS za veliku aplikaciju?

Očekivano od kandidata: Ispitivač želi razumjeti vaš pristup organizaciji, skalabilnosti i održivosti.

Primjer odgovora:
„Koristio bih modularnu arhitekturu poput BEM-a, SMACSS-a ili CSS modula za logičko strukturiranje stilova. Svaka komponenta bi imala vlastite stilove s ograničenim dosegom kako bi se izbjegli sukobi. Također bih uveo vodič za stil i konvencije imenovanja kako bih održao dosljednost među timovima i spriječio prenapuhavanje CSS-a kako projekt raste.“

9) Pretpostavimo da se klijent žali da se izgled stranice u Internet Exploreru 11 prekida. Koje biste korake poduzeli da to riješite?

Očekivano od kandidata: Anketar želi testirati vašu prilagodljivost problemima sa starijim preglednicima.

Primjer odgovora:
„Prvo bih reproducirao problem koristeći istu verziju preglednika. Zatim bih identificirao nepodržane CSS značajke putem alata za razvoj preglednika i provjerio kompatibilnost koristeći resurse poput MDN-a ili Can I Use. Nakon toga bih implementirao alternativne opcije ili polyfillove prema potrebi. Također bih dokumentirao rješenje za buduće održavanje.“

10) Kako osiguravate kompatibilnost među preglednicima u svojim CSS projektima?

Očekivano od kandidata: Ispitivač želi potvrditi vašu svjesnost o standardima testiranja i kompatibilnosti.

Primjer odgovora:
„Osiguravam kompatibilnost među preglednicima ranim i čestim testiranjem na ključnim preglednicima pomoću alata poput BrowserStacka. Slijedim CSS standarde i izbjegavam nestandardna svojstva. Također koristim PostCSS s Autoprefixerom za automatsku obradu prefiksa dobavljača. Dosljedna validacija i testiranje tijekom razvoja sprječavaju veće probleme nakon lansiranja.“

Najčešća pitanja i odgovori za CSS intervju

1) Objasnite modernu CSS kaskadu, uključujući @layer, specifičnost i redoslijed izvora.

2) Po čemu se kontejnerski upiti razlikuju od medijskih upita i gdje biste koristili svaki od njih?

3) Koje su karakteristike i prednosti :has(), i kako se to uspoređuje s :is() i :where() ?

4) Gdje biste primijenili CSS prilagođena svojstva za teme i koje su njihove prednosti i nedostaci?

5) Koji sustav izgleda odgovara kojem problemu: Flexbox, Grid ili Subgrid?

6) Poboljšavaju li logička svojstva internacionalizaciju? Objasnite prednosti i nedostatke.

7) Kada biste koristili clamp() i moderne jedinice za prikaz ( svh, lvh, dvh ) za vrstu tekućine i razmak?

8) Što je kontekst slaganja i kako ga z-index i faktori pozicioniranja stvaraju ili izoliraju?

9) Je li izvorno CSS ugniježđivanje spremno za produkciju i kako biste migrirali s preprocesora?

10) Možete li koristiti upite u kontejnerskom stilu i koje su njihove praktične prednosti?

11) Koji su faktori performansi važni za CSS i kako izbjeći probleme s izgledom?

12) Koje CSS značajke podržavaju pristupačnost odmah po instalaciji? Navedite prednosti i primjere.

13) Različiti načini uključivanja CSS-a i prednosti ili nedostaci svakog pristupa.

14) Koja je razlika između relative, absolute, fixedi sticky pozicioniranje? Navedite smjernice za slučaj upotrebe.

15) Koji čimbenici oblikuju održivu CSS arhitekturu (BEM, ITCSS, uslužni programi, slojevi) i kakav je životni ciklus stila komponente?

16) Kako Shadow DOM utječe na CSS scoreping, i koji su različiti načini stiliziranja dijelova?

17) Koje su karakteristike CSS box modela i zašto box-sizing: border-box stvar?

18) Gdje biste koristili @supports za progresivno poboljšanje i koje su prednosti?

19) Koje CSS jedinice trebate odabrati i koja je razlika među njima?

20) Pomažu li CSS brojači sa strukturiranim sadržajem i koje su njihove prednosti i nedostaci?

21) Kada biste trebali animirati pomoću CSS-a i koja su svojstva najsigurnija za performanse?

22) Može li CSS pomoći responzivnim slikama i koji su različiti načini pristupa?

23) Je li JavaJe li tamni način rada bez skripti izvediv i koji ga čimbenici čine robusnim?

24) Postoje li nedostaci dubokog ugniježđivanja selektora i visoke specifičnosti, a koje su prednosti pristupa niske specifičnosti?

25) Koja metodologija - BEM, ITCSS ili utility-first - odgovara različitim timovima i koje su prednosti i nedostaci?

26) Objasnite životni ciklus tokena za razmak i tipografiju od dizajna do koda s primjerima.

27) Kako :focus-visible, :focus-withini :target razlikuju se i koje prednosti svaki od njih pruža?

28) Koje su prednosti i nedostaci content-visibility i CSS ograničenja na velikim dokumentima?

29) Kako izgraditi responzivnu mrežu s minimalnim točkama prekida koristeći minmax() i auto-fit/auto-fill?

30) Koji čimbenici određuju kada odabrati gap u odnosu na margine za razmak između stavki?

31) Koji su nedostaci oslanjanja na !important, a koje su sigurnije alternative?

32) Koje vrste selektora treba izbjegavati zbog performansi ili održivosti i zašto?

33) Kada biste trebali odabrati @layer komunalne usluge u odnosu na varijante komponenti i koje su prednosti?

34) Može li Grid zamijeniti svu upotrebu Flexboxa ili postoje razlozi za zadržavanje oba, utemeljeni na razlikama?

35) Koje su prednosti i nedostaci korištenja aspect-ratio u odnosu na hakove s paddingom?

36) Kako biste izradili otporni ljepljivi zaglavlje koje poštuje sigurna područja i mobilne prikaze?

37) Koja je razlika između skaliranja gustoće i skaliranja veličine komponenti i kada bi se svako od njih trebalo koristiti?

38) Koji nedostaci proizlaze iz velikih globalnih resetiranja i koje su sigurnije alternative?

39) Kako učinkovito otklanjati greške u složenim kaskadnim problemima koristeći DevTools i moderne CSS značajke?

40) Gdje se stilovi ispisa i medijski upiti uklapaju u profesionalni CSS cjevovod i koje su njihove prednosti i nedostaci?

41) Koja strategija stvara predvidljiv sustav preklapanja i kako biste trebali upravljati z-index mjerilo?

42) Kako bi izvorne kontrole obrazaca trebale biti odgovorno stilizirane i koje su prednosti i nedostaci uobičajenih tehnika?

43) Koje strategije postoje za kritični CSS i dijeljenje koda, te koje su prednosti i nedostaci?

44) Koje su moderne CSS opcije boja ( color-mix, relativna sintaksa boja, perceptivni prostori) i kada ih treba koristiti?

45) Koje tehnike stvaraju otpornu, responzivnu tipografiju i vertikalni ritam?

46) Kako se prikvači pomicanjeping i padding/margine za pomicanje surađuju kako bi poboljšale navigaciju?

47) Koji CSS obrasci čine tooltipove i popovere otpornima i kada je to slučaj? JavaJe li skripta još uvijek potrebna?

48) Kako dizajnirati responzivne, čitljive tablice podataka bez pribjegavanja složenim prepisivanjima?

49) Kada načini miješanja, filteri i maske pružaju praktičnu vrijednost i koji su kompromisi?

50) Koju ulogu imaju color-scheme i teme korisničkog sučelja sustava igraju ulogu u kohezivnom stiliziranju u svim preglednicima?

🔍 Najčešća pitanja za CSS intervju sa stvarnim scenarijima i strateškim odgovorima

1) Koja je razlika između inline, inline-blocki block elementi u CSS-u?

2) Kako pristupate otklanjanju pogrešaka u CSS-u u složenim izgledima?

3) Možete li objasniti kako funkcionira CSS kaskada i specifičnost?

4) Opišite kako se nosite s responzivnim dizajnom bez prevelikog oslanjanja na frameworkove.

5) Kako biste optimizirali CSS za performanse i održavanje?

6) Recite mi o situaciji kada ste morali surađivati ​​s programerima ili dizajnerima kako biste riješili sukob oko stila.

7) S kojim ste se izazovima suočili prilikom implementacije CSS animacija ili prijelaza i kako ste ih prevladali?

8) Kako biste strukturirali CSS za veliku aplikaciju?

9) Pretpostavimo da se klijent žali da se izgled stranice u Internet Exploreru 11 prekida. Koje biste korake poduzeli da to riješite?

10) Kako osiguravate kompatibilnost među preglednicima u svojim CSS projektima?

Sažmite ovu objavu uz:

Prijavite se za bilten

1) Objasnite modernu CSS kaskadu, uključujući `@layer`, specifičnost i redoslijed izvora.

3) Koje su karakteristike i prednosti `:has()`, i kako se to uspoređuje s `:is()` i `:where()` ?

7) Kada biste koristili `clamp()` i moderne jedinice za prikaz ( `svh`, `lvh`, `dvh` ) za vrstu tekućine i razmak?

14) Koja je razlika između `relative`, `absolute`, `fixed`i `sticky` pozicioniranje? Navedite smjernice za slučaj upotrebe.

17) Koje su karakteristike CSS box modela i zašto `box-sizing: border-box` stvar?

18) Gdje biste koristili `@supports` za progresivno poboljšanje i koje su prednosti?

27) Kako `:focus-visible`, `:focus-within`i `:target` razlikuju se i koje prednosti svaki od njih pruža?

28) Koje su prednosti i nedostaci `content-visibility` i CSS ograničenja na velikim dokumentima?

29) Kako izgraditi responzivnu mrežu s minimalnim točkama prekida koristeći `minmax()` i `auto-fit/auto-fill`?

30) Koji čimbenici određuju kada odabrati `gap` u odnosu na margine za razmak između stavki?

31) Koji su nedostaci oslanjanja na `!important`, a koje su sigurnije alternative?

33) Kada biste trebali odabrati `@layer` komunalne usluge u odnosu na varijante komponenti i koje su prednosti?

35) Koje su prednosti i nedostaci korištenja `aspect-ratio` u odnosu na hakove s paddingom?

41) Koja strategija stvara predvidljiv sustav preklapanja i kako biste trebali upravljati `z-index` mjerilo?

44) Koje su moderne CSS opcije boja ( `color-mix`, relativna sintaksa boja, perceptivni prostori) i kada ih treba koristiti?

50) Koju ulogu imaju `color-scheme` i teme korisničkog sučelja sustava igraju ulogu u kohezivnom stiliziranju u svim preglednicima?

1) Koja je razlika između `inline`, `inline-block`i `block` elementi u CSS-u?

6) Recite mi o situaciji kada ste morali surađivati s programerima ili dizajnerima kako biste riješili sukob oko stila.