Brug containerforespørgsler i dag

Lige siden der har været responsivt webdesign, har udviklere spurgt om muligheden for at designe DOM -elementer baseret på deres faktiske størrelse og ikke på størrelsen på viewporten i browseren (ved hjælp af medieforespørgsler ). Faktisk er containerforespørgsler (oprindeligt elementforespørgsler) sandsynligvis den mest efterspurgte CSS -funktion, som browsere stadig ikke har .


Der er allerede mange , mange , mange indlæg, der præcist forklarer, hvorfor containerforespørgsler er svære at implementere i CSS, og hvorfor browserproducenter tøver med at implementere dem. Hvis du vil nyde det nu, kan lidt JavaScript hjælpe:

c51c33e1533e68c3f8fd24633700789f

Det hele ser da sådan ud:

See the Pen by David Vielhuber (@vielhuber) on CodePen.

Brudpunkterne, vælgeren og stil attributter kan anvendes til at definere de forskellige breakpoints, den automatiske vælgeren og typen af klasser tilsat. Hvis du bruger scriptet, kan du adressere de nyligt genererede klasser som følger:

c51c33e1533e68c3f8fd24633700789f

Brugen af ​​containerforespørgsler er især værd for elementer i overlejringer, popups, sidebjælker eller brugerdefinerede elementer - også nu, f.eks. Med scriptet ovenfor.

Tilbage