Tripoli: CSS-grunden från 2007 som skulle få webbläsarna att rita lika

Tripoli var en CSS-grund som släpptes på monc.se/tripoli i augusti 2007. Den första delen nollställde webbläsarnas egna standardstilar. Den andra delen byggde sedan upp en gemensam grund för typografi och HTML-element. Den här sidan berättar vad Tripoli gjorde, varför det behövdes då och vad som har ersatt det i dag.

Problemet 2007: varje webbläsare ritade på sitt sätt

Internet Explorer 6 och 7, Firefox, Safari och Opera hade alla olika standardvärden för marginaler, rubrikstorlekar, listor och formulär. En sida som såg rätt ut i en webbläsare kunde se trasig ut i en annan. Lösningen blev så kallade CSS-återställningar, som först nollställde allt och sedan lät utvecklaren bestämma själv. Det fanns flera kända varianter, bland annat Yahoos YUI Reset, Eric Meyers reset och ramverket Blueprint.

Vad Tripoli gjorde annorlunda

Tripoli beskrevs som ”a CSS standard for HTML rendering”, alltså en standard för hur HTML ska ritas upp. Upphovsmannen ville inte kalla det ett ramverk, eftersom det inte styrde hur själva sidlayouten skulle byggas. Tripoli bestod av två delar:

• Återställning: marginaler, ramar och ärvda typsnitt nollställdes för alla element.
• Återuppbyggnad: filen generic.css gav rubriker, stycken, listor, tabeller och citat genomtänkta och enhetliga värden. Grundstorleken sattes så att 1em motsvarade 10 pixlar, vilket gjorde det lätt att räkna.

Koden släpptes som fri programvara under GNU GPL version 3.

Betan: CSS som stängde av gammal HTML

Hösten 2007 kom en betaversion med en ny del: en ”disabled section” som med CSS oskadliggjorde föråldrade HTML-taggar som font, center, blink och marquee. I stället för att markera taggarna som fel fick de ärva texten omkring sig, så att de helt enkelt slutade påverka utseendet. Det var användbart för sajter där redaktörer klistrade in text i ett publiceringssystem som skapade sådan kod. Hela paketet vägde enligt samtida rapporter högst 5,5 kB.

Idén förklarades i blogginlägget Disabling Deprecated HTML Using CSS, som länkades från designbloggar och forum i bland annat Japan, Frankrike och Ryssland. Tripoli blev också en av byggstenarna i BlueTrip, ett ramverk som kombinerade Blueprint, Tripoli och 960.gs.

Hur man gör i dag

Behovet av hårda återställningar är mindre i dag. HTML-specifikationen beskriver numera hur standardstilarna ska se ut, och webbläsarna följer den betydligt bättre. Taggarna font och center är föråldrade i HTML5. De flesta använder därför en mild normalisering i stället för att nollställa allt, ofta med några moderna verktyg:

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, h2, h3, p, figure) { margin: 0; }
  :where(img, video) { max-width: 100%; height: auto; }
}

• @layer lägger återställningen i ett eget kaskadlager, så att dina egna regler alltid vinner.
• :where() har specificiteten noll och blir därför lätt att skriva över.
• box-sizing: border-box gör att bredden räknas inklusive kantlinje och inre marginal.

Vill du förstå varför regler vinner över varandra finns en genomgång i Så fungerar CSS-arv och specificitet.

Källor

• HTML.it, 26 oktober 2007: Tripoli in beta e la disabled section
• Perishable Press: More Killer CSS Reset Styles (källkodens licens och ändringslogg)
• CSSDeck: Tripoli CSS Reset
• HTML.it om BlueTrip
• Arkiverade versioner av monc.se/tripoli i Internet Archive

Läs också om Galleria och bloggen David’s Kitchen.