CSS-tekniker som utvecklades från blinkande text till Flexbox

Spacer-GIF:en, ``-taggen och `zoom: 1` finns inte kvar i någon modern kodbas. De var lösningar på riktiga problem, byggda för webbläsare som inte kunde bättre. Att förstå varför de fanns gör det lättare att förstå varför CSS ser ut som det gör i dag. Här är den kronologiska genomgången, från 1994 fram till Container Queries.

Nio steg från presentationell HTML till moderna layoutmoduler

1. ``-taggen (1994). Netscape lanserade `` samma år som Håkon Wium Lie publicerade sitt förslag ”Cascading HTML Style Sheets”. Problemet var uppenbart: ville du byta typsnitt på sajten fick du redigera varje enskild sida. Stil och innehåll satt ihop i samma tagg.

1. `` och ``. Presentationsbeslut som HTML-element. `` fick text att blinka och blev snabbt en symbol för allt som var fel med 1990-talets webb. Ersattes av `text-align: center` respektive ingenting alls, eftersom ingen egentligen ville ha blinkande text.

1. Tabellayout. `
   ` var tänkt för tabelldata men användes för att bygga hela sidlayouter. Kolumner, sidhuvuden, navigationsfält, allt i nästlade tabeller. Det fungerade och såg likadant ut i alla webbläsare, vilket var poängen.

1. Transparenta 1×1-GIF:ar. För att få pixelperfekt luft i tabellcellerna sträckte man ut en osynlig GIF-bild till önskad bredd och höjd. Tekniken dominerade i ungefär ett decennium. Den ersattes av `padding` och `margin`, det vill säga av att CSS faktiskt fick fäste.

1. CSS1 utan layout (1996-2000). CSS Level 1 blev W3C Recommendation den 17 december 1996. Internet Explorer 3 hade lagt till visst CSS-stöd redan i augusti samma år. Men CSS1 saknade flexibel layout, hade begränsade positioneringsmöjligheter och kände inte till något som liknade responsiv design. Först år 2000 fick någon webbläsare fullt CSS1-stöd, Internet Explorer 5.0 för Mac.

1. Webbläsarhack. När samma kod renderades olika i olika webbläsare skrev utvecklare regler som avsiktligt var syntaktiskt konstiga, så att bara en viss webbläsare plockade upp dem. Stjärn-hacket, understreck-hacket, kommentarsknep. Det fanns hela [samlingar av browserhacks](http://browserhacks.com) att välja ur.

1. `hasLayout` i Internet Explorer. Äldre versioner av IE hade en intern flagga per element som avgjorde hur elementet renderades och som inte gick att sätta direkt. Standardtricket var `zoom: 1`, en egenskap som inte gjorde något synligt men som råkade slå på flaggan. Den [dokumenterade beskrivningen av hasLayout](https://www.haslayout.net/haslayout.html) förklarar varför buggar försvann av en rad kod som inte borde göra någonting.

1. Leverantörsprefix. Safari introducerade `border-radius` med `-webkit-`-prefix redan 2007. Under CSS3-eran skrev man samma regel fyra gånger, en per prefix plus den ostandardiserade. Rundade hörn, skuggor och gradienter hade före det krävt bakgrundsbilder, ofta uppdelade i flera bildfiler.

1. Layout före Flexbox och Grid. Floats, clearfix-hack och negativa marginaler höll ihop kolumner. Media Queries Level 3 blev Recommendation i juni 2012 och gjorde responsiv design möjlig. Flexbox fick brett stöd omkring 2015, CSS Grid implementerades i webbläsarna 2017. Då försvann behovet av att räkna procent i huvudet.

Håkon Wium Lie löste ett problem som inte hette design

Tim Berners-Lees första webbläsare från 1990 hade stöd för stilmallar, flera typsnitt och justering. Men det fanns ingen standard. Varje webbläsare tolkade dokument på sitt eget sätt och när Mosaic kom 1993 med ``-taggen blev webben visuell utan att ha något språk för utseende.

Idén i förslaget från 1994 var enkel. Lägg presentationen i en separat fil, referera till den från alla sidor, ändra på ett ställe. Lie och Bert Bos arbetade vidare tillsammans 1995 när W3C bildade sin CSS-arbetsgrupp och de första implementeringarna kom i testwebbläsarna Arena och Argo.

Samma år, 1994, lanserade alltså Netscape ``-taggen. Två motsatta svar på samma fråga, med nio års avstånd till att det avgjordes.

CSS Zen Garden bevisade poängen 2003

Sajten använde en enda identisk HTML-fil och lät designers skicka in olika CSS-filer till den. Resultaten var radikalt olika sidor med exakt samma markup. Argumentet för separation av innehåll och presentation hade varit teoretiskt i sju år. Nu gick det att klicka på det.

Acid2-testet kom 2005 och pressade webbläsartillverkarna mot CSS2.1-efterlevnad. Samma år lanserades Sass, den första CSS-preprocessorn, som ett svar på att CSS saknade variabler och nästling. LESS följde 2009.

Prefixen försvann, moduler tog över versionsnumren

CSS3 blev aldrig en version. Från 2011 publicerades CSS i stället som fristående moduler med egna nivåer, vilket är varför du hittar ”Selectors Level 3” och ”CSS Grid Level 2” men ingen samlad CSS4-specifikation. Selectors Level 3 och CSS3 Color blev Recommendations 2018, samma år som Flexbox Level 1.

Utvecklingen fortsatte snabbt efter det. Firefox implementerade Subgrid först, 2020. Container Queries kom i Chrome 105 och Safari 16 under 2022, tillsammans med Cascade Layers. Under 2023 hade `:has()`-pseudoklassen stöd i alla större webbläsare, Firefox fick Container Queries och Chrome och Safari fick Subgrid.

Det som återstår av den gamla eran är mest arv i äldre kodbaser. Vill du styla komponenter isolerat i dag finns Web Components med Shadow DOM, där CSS inte läcker in eller ut. Det är den moderna versionen av samma önskan som drev tabellayouten: att kunna bygga en bit av sidan utan att resten går sönder.

Vad den här historien är bra för

Gamla hack dyker fortfarande upp när du öppnar en kodbas från 2009. `zoom: 1` utan kommentar, `float: left` på allt, en clearfix-klass ingen vågar ta bort. Att veta vad de gjorde och vilken webbläsare de var till för gör städningen betydligt snabbare.

Sedan finns det en andra nytta. Container Queries och `:has()` löser saker som krävde JavaScript för fem år sedan. Nästa gång du lägger in ett bibliotek för något layoutrelaterat är det värt att kolla om CSS hunnit ikapp. Det gör det ofta.

Vill du experimentera med färger och kontraster medan du moderniserar gammal CSS finns en färgkonverterare för HEX, RGB och HSL med WCAG-kontroll här på sajten. Och om du vill läsa mer om hur frontend-arbete ser ut i praktiken: ett gränssnitt som inte går att styra med tangentbordet är trasigt.

FAQ

Varför slutade man använda tabeller för layout?

Tabeller blandar innehåll och presentation, gör sidorna svårare att läsa för skärmläsare och blir snabbt ohanterliga när layouten ska ändras. När CSS fick positionering och senare Flexbox och Grid fanns det inget skäl kvar att använda dem till annat än faktisk tabelldata.

Behöver jag fortfarande skriva leverantörsprefix?

Nej, inte för de egenskaper som diskuteras här. `border-radius`, `box-shadow` och transitions är standardiserade sedan länge. Enstaka experimentella egenskaper har fortfarande prefix men det hanteras normalt av byggverktyg som Autoprefixer.

Vad hände med ``?

Den togs bort ur webbläsarna och finns inte kvar i någon modern rendering-motor.

Vad är skillnaden mellan Flexbox och Grid?

Flexbox hanterar layout i en dimension, alltså en rad eller en kolumn och fördelar utrymme mellan objekten. Grid hanterar två dimensioner samtidigt och låter dig definiera rader och kolumner i ett rutnät. I praktiken används de tillsammans: Grid för sidans övergripande struktur, Flexbox inuti komponenterna.