Përdorni pyetjet e kontejnerëve sot

Që nga ardhja e dizajnit të faqeve të internetit që i përshtaten nevojave, zhvilluesit kanë kërkuar mundësinë për të stiluar elementët DOM bazuar në madhësinë e tyre aktuale dhe jo në madhësinë e dritares së shikimit të shfletuesit (duke përdorur pyetje mediatike ). Në fakt, pyetjet e kontejnerëve (fillimisht pyetjet e elementëve) janë ndoshta veçoria më e kërkuar e CSS që shfletuesve ende u mungon .


Tashmë ka shumë , shumë , shumë postime që shpjegojnë saktësisht pse pyetjet e kontejnerëve janë të vështira për t'u zbatuar në CSS dhe pse prodhuesit e shfletuesve hezitojnë t'i zbatojnë ato. Nëse doni ta shijoni tani, pak JavaScript mund t'ju ndihmojë:

c51c33e1533e68c3f8fd24633700789f

E gjithë gjë atëherë duket kështu:

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

Pikat e prishjes , atributet e përzgjedhësit dhe stilit mund të përdoren për të përcaktuar pikat e ndryshme të ndërprerjes, përzgjedhësin automatik dhe llojin e klasave të shtuara. Nëse jeni duke përdorur skriptin, mund t'i adresoni klasat e krijuara rishtazi si më poshtë:

c51c33e1533e68c3f8fd24633700789f

Përdorimi i pyetjeve të kontejnerëve është veçanërisht i vlefshëm për elementët në mbivendosje, dritare kërcyese, shirita anësor ose elementë të personalizuar - edhe tani, për shembull, me skriptin e mësipërm.

Mbrapa