Låt oss Inte Glömma Behållare Frågor

0
8

Behållare frågor är alltid på toppen av listan över de efterfrågade förbättringar till CSS. Den allmänna känslan är att om vi hade en container frågor, vi skulle inte skriva så många globala media frågor baserade på sidan storlek. Det beror på att vi faktiskt försöker styra en mer begränsad behållare, och den enda anledningen till att vi använder media queries för att nu är för att det är det bästa verktyget vi har i CSS. Jag tror absolut det.

Det är en annan känsla som går runt en gång i en stund som går något i stil med: “du utvecklare tror att du behöver behållare frågor, men du verkligen inte.” Jag är inte ett fan av det. Det verkar fruktansvärt uppenbart att vi skulle göra bra saker med dem om de var tillgängliga, inte minst som skriver renare, bärbar, begriplig kod. Alla verkar överens om att bygga UIs från komponenter är rätt väg att gå dessa dagar vilket gör att behovet av behållare frågor allt mer uppenbara.

Det är underbart att det finns modern JavaScript idéer som hjälper oss att inte använda dem i dag — men det betyder inte att tekniken måste stanna där. Det ger mycket mer känsla i CSS.

Här är min sent 2019 tänkte dumpa på ämnet:

  • Philip Walton är “Lyhörd Komponenter: en Lösning på Behållaren Frågor Problemet” är ett bra utseende på med hjälp av JavaScript ResizeObserver som ett sätt att lösa problemet idag. Den presterar bra och fungerar var som helst. Demo webbplats är den bästa som finns, eftersom det belyser behovet lyhörd komponenter (även om det finns andra dokumenterade användningen fall också). Philip säger även en ren CSS-lösning skulle vara mer perfekt.
  • CSS häckande fick en liten rund av entusiasm för ungefär ett år sedan. Samtalet gör att det verkar som häckande är rimligt. Jag föredrar detta som en lång tid fläkt av förnuftiga Sass häckning. Det får mig att undra om syntaxen för container frågor kan utnyttja samma typ av sak. Kanske nästlade frågor är begränsad till den förälder som väljare? Eller du prefix media uttalande med ett et-tecken som den nuvarande spec inte med ättling väljare?
  • Andra föreslagna syntax i allmänhet innebära en viss användning av kolon .behållare:media(max-width: 400px) { }. Jag gillar det också. Enda-kolon-selektorer (pseduo-väljare) är filosofiskt “välj element under dessa förhållanden” — som :hover, :nth-child, etc. — så en media omfattning vettigt.
  • Jag tror inte att syntax är den största fienden av denna funktion, det är resultatet av hur den genomförs. Senast jag förstått, det är inte ens prestanda så mycket som man fyller med hela rendering flöde av hur webbläsare fungerar. Det verkar som om ett enormt hinder. Jag har fortfarande inte vill glömma det. Det finns massor av innovation som händer på nätet, och bara för att det är inte klart hur man ska genomföra det idag, det betyder inte att någon inte kommer att räkna ut en praktisk väg framåt i morgon.