Som frontend-utvecklare har vi önskat oss många saker genom åren – sätt att centrera saker i CSS, kapsla in stilar, ställa in ett elements bildförhållande, få finare kontroll över våra färger, välja ett element baserat på dess barns egenskaper, hantera lager av specificitet, tillåta element att svara på deras föräldrars bredd... listan fortsätter och fortsätter.
Och nu när vi fick allt vi önskat oss och mer, frågar några av oss - har vi nu för mycket CSS?
De mörka tiderna
Om du, som jag, kom på webbutveckling under CSS:s barndom, verkar tanken på att ha för mycket av det vara löjlig.
Förr i tiden bestod praktiskt taget hela arbetsbeskrivningen för en frontend-utvecklare av att hantera CSS:s begränsningar. De clearfix hack att rensa flyter, den 100% stoppning hack att göra fyrkantiga divs, för att inte tala om halvslumpmässigt använda orelaterade egenskaper för att lura Internet Explorer att göra din budgivning.
På den tiden var webbläsaren en slug fiende som skulle besegras genom ren list och mystiska besvärjelser. Idag väntar den perfekta fastigheten och bara en copy-paste bort på MDN.
Den nya eran av CSS
Men idag är saker och ting helt annorlunda: inte bara går saker mycket snabbare, utan webbläsarleverantörer bryr sig faktiskt om att göra utvecklare glada! Jag vet, jag kunde inte tro det heller. Men jag kör varje år Tillstånd för CSS utvecklarundersökning (som är öppna nu förresten - gå och ta det!) och jag vet att webbläsarutvecklingsteam använder undersökningsresultaten (bland många andra datapunkter) för att informera sin färdplan.
Utöver detta har Google också hjälpt till att finansiera mitt arbete med undersökningen, och till och med anställt Lea Verou att ta ledningen i valet av årets enkätfrågor.
Det är inte bara Google. Det har blivit på modet att bash Safari och Apple i allmänhet (ibland välförtjänt), men du kan inte förneka hur passionerad någon gillar Jen Simmons handlar om att lyssna på utvecklare och förbättra webben.
Och inte bara webbläsarleverantörer förbättrar CSS på egen hand; de samarbetar till och med över stridslinjerna med initiativ som t.ex Interop 2023 för att minska inkonsekvenser och inkompatibiliteter mellan webbläsare.
För mycket av det goda?
Resultatet av allt detta är att vi nu står inför en pinsamhet av CSS-rikedomar, och det kan vara svårt att komma ikapp. CSS-rutnät började stödjas i större webbläsare för nästan fem år sedan, men jag kontrollerar fortfarande en referens varje gång jag använder den. Och lika cool som undernät verkar, jag har ännu inte ens provat det.
Under processen att välja vilka CSS-funktioner som ska inkluderas eller inte i CSS-staten, Lea och jag övervägde många funktioner, men vi förkastade också en hel del. Några exempel på funktionen vi inte inkluderar är:
- Smakämnen
linear()lättnadsfunktion, som låter dig definiera lättnadskurvor med mer granularitet. - Smakämnen
env()fungera, som låter dig använda variabler som definieras av webbläsaren eller enheten. - Smakämnen
scrollbar-widthegenskap, som hjälper till att kontrollera en rullningslists utseende. - Smakämnen
margin-trimegenskap, som låter dig styra hur en containers barns marginaler beter sig.
Dessa är alla potentiellt mycket användbara och skulle alla ha varit stora nyheter under de senaste årens CSS-torka. Men i dagens sammanhang måste de slåss om uppmärksamheten med mycket större meddelanden, som has()-väljaren eller CSS-kapsling!
Inte upphetsad
Som Silvestar Bistrović skriver, han är "inte så exalterad över alla dessa nya CSS-funktioner." Detta hittade ett eko på Twitter, med Sara Soueidan säger att det hon bryr sig om är "praktisk, inte hur glänsande en funktion ser ut för tillfället."
Detta kan verka som en negativ inställning, men jag tror att det är förståeligt. Ingen kan förväntas hålla jämna steg med så många nya funktioner!
En annan oavsiktlig (eller kanske avsedd?) konsekvens är att ju mer komplex CSS blir, desto mer höjer det ribban för alla nya företag som vill utveckla en webbläsarmotor – för att inte säga något om den extra arbetsbelastningen när det gäller att underhålla och dokumentera allt. dessa nya funktioner.
CSS-överskridande
Det finns också den mycket giltiga oro att CSS kan förgrena sig till områden som det inte är riktigt lämpligt att hantera. Det är en annan sak Sara Soueidan påpekade när hon reagerade på den nya CSS Toggles experimentella implementeringen (här är en biljett som diskuterar det):
Många har gjort den mycket rimliga poängen att den här typen av beteende bäst skulle hanteras av ett nytt HTML-element istället för att hantera växlande tillstånd enbart genom CSS, och att CSS kanske inte är det bästa mediet för att säkerställa att tillgänglighetsproblem åtgärdas korrekt.
När CSS tar över något som tidigare hanterats genom JavaScript ses detta generellt som en bra sak, eftersom det ofta minskar mängden kod som webbläsaren måste ladda. Så jag är försiktigt optimistisk när det gäller CSS-växlingar och litar på att CSS-arbetsgruppen kommer att ta itu med samhällets oro. Men det kan ändå komma en dag då vi börjar oroa oss för att CSS kan expandera utanför dess gränser och inkräkta på HTML och JavaScripts ansvar.
Nya förväntningar
Och kanske är det detta som behöver förändras: vi kanske borde släppa förväntningarna som CSS-utvecklare måste känna till alla av CSS?
Denna förväntning härrör från de dagar då CSS var en eftertanke, den där lilla irriterande syntaxen du var tvungen att lära dig för att göra din knapp blå och fet precis som kunden bad om. Men jag tror att vi måste acceptera att dagens CSS bara kan vara alldeles för omfattande för en enda person att bemästra, särskilt utöver andra front-end-uppgifter.
As Michelle Barker uttrycker det:
Och det är där jag själv landar till slut. Jag har slutit lugn med det faktum att jag förmodligen aldrig kommer att använda - eller ens veta om - alla möjliga CSS-funktioner. Och det här kommer från någon som kör en undersökning om CSS!
Men dessa nya funktioner kommer säkert att vara användbara för någon. Någon kommer att skriva blogginlägg om dem, skapa coola CodePens med dem, hålla föredrag om dem. Den personen kommer att vara en cool, ung, energisk utvecklare som fortfarande har allt sitt hår. Med andra ord, det kommer inte att vara jag - och det är bra.
Och kanske är du orolig att den här nya utvecklaren kommer att bli överväldigad av allt de måste lära sig på en gång. Men tänk på alla de saker de vana måste lära sig om, just för att det har ersatts av dessa nyare alternativ. Jag vet att jag skulle ta den affären när som helst.
Men tänk på det: under de senaste åren har vi inte bara sett en enorm ökning av antalet enheter vi behöver ta hand om, vi har också börjat inse att vi alla konsumerar webben på lite olika sätt, oavsett om det beror på till funktionshinder, nuvarande sammanhang eller bara personliga preferenser. Borde inte CSS anpassa sig till denna nya verklighet?
Nu måste jag erkänna att allt detta har fått mig att känna mig lite nostalgisk... så ursäkta mig medan jag går bort ett par flöten, bara för gamla tiders skull.
Som jag nämnde, den årliga Status för CSS-undersökning är nu öppen. Oavsett om du tycker att det finns för mycket CSS eller inte, är undersökningen ett bra sätt att låta webbläsarutvecklare veta hur du känner, så gå fyll i den om du har 10 minuter på dig.
