Normalize.css - Vad är det?

Som webbutvecklare ställs jag regelbundet inför utmaningen att säkerställa konsekventa layouter i olika webbläsare. Gång på gång stöter jag på Normalise.css ett verktyg som har etablerat sig som oumbärligt för modern webbutveckling under de senaste åren. Låt oss gå djupare in i frågan och ta reda på varför Normalize.css är så kraftfullt och hur du kan få ut det mesta av det.

Vad är Normalize.css och varför är det viktigt?

Normalise.css är ett CSS-bibliotek som utvecklats av Nicolas Gallagher och Jonathan Neal har utvecklats för att normalisera standardstilarna för HTML-element i olika webbläsare. Syftet är att eliminera skillnaderna i standardvisningen av element utan att radera användbara webbläsarstandarder. Detta står i kontrast till klassiska CSS-resets, som tar bort alla stilar och ger utvecklare uppgiften att designa om varje element från grunden.

Formatmallen Normalize.css används för närvarande i olika projekt: Twitter Bootstrap, HTML5-boilerplate, GOV.UK, Rdio, CSS-trick, SoundCloud samt i många andra ramverk, verktygslådor och webbplatser.

Formatmallen stöder ett stort antal webbläsare (inklusive mobila webbläsare) och innehåller CSS-regler för normalisering av HTML5-element, typografi, listor, inbäddat innehåll, formulär och tabeller.

Varför är detta viktigt? Webbläsarnas standardstilar är ofta inkonsekventa, vilket innebär att en webbplats kan se olika ut i olika webbläsare. Normalize.css hjälper till att eliminera dessa inkonsekvenser genom att förenhetliga standardstilar samtidigt som användbara standardvärden bevaras. Detta sparar inte bara tid, utan ger också en mer konsekvent användarupplevelse på olika enheter och i olika webbläsare.

Mer djupgående funktioner i Normalize.css

Normalize.css erbjuder ett antal fördelar som går utöver ren normalisering:

1. Konsistens i webbläsaren: Den tar hand om många mindre men avgörande skillnader i visningen av element mellan olika webbläsare, till exempel hanteringen av inmatning-fält, knapp-stilar och bord-layouter. Detta minskar ansträngningen för felsökning och säkerställer en standardiserad grund.
2. Utökning av HTML5-stödet: HTML5 förde med sig många nya element och attribut som ofta inte visas korrekt i äldre webbläsare. Normalize.css ser till att dessa element visas på ett konsekvent och korrekt sätt i alla vanliga webbläsare. Till exempel kan sammanfattning-element, som är avsett att användas i Detaljer-element visas på ett enhetligt sätt i äldre webbläsare.
3. Optimerad typografi: Normalize.css innehåller också typografiska justeringar som säkerställer att texten är enhetlig och läsbar på alla plattformar. Detta inkluderar inställningen av Linjehöjd, standardisering av teckenstorlek och borttagning av onödiga marginaler från standardtextelement.
4. Formulär och inmatningselement: Ett av de mest problematiska områdena inom webbutveckling är visningen av formulärelement. Olika webbläsare hanterar dessa element på mycket olika sätt, vilket kan leda till betydande skillnader i utseende. Normalize.css normaliserar dessa stilar genom att skapa konsekventa basstilar för inmatning, textarea, Välj och knapp-element.
5. Modulär design: Koden i Normalize.css är uppdelad i väldokumenterade, separata avsnitt. Detta gör att du kan använda enskilda delar specifikt eller utelämna dem om så krävs. Om du t.ex. vet att din webbplats inte använder formulär kan du enkelt utelämna det här avsnittet, vilket ytterligare optimerar laddningstiden för din webbplats.

Normalisera eller återställa?

Det är värt att titta närmare på hur en normalise.css-stilmall skiljer sig från en vanlig CSS-återställning:

„Normalise.css bevarar användbara standardstilar.”

Återställningen åstadkommer en homogen visuell stil genom att bokstavligen platta till standardstilarna för nästan alla element. Däremot bevarar normalise.css många användbara standardstilar för webbläsaren. Det innebär att du inte behöver omdefiniera alla stilar för de allmänna typografiska elementen.

Om ett element tilldelas olika standardstilar i olika webbläsare syftar normalise.css till att göra dessa stilar så konsekventa och kompatibla med moderna standarder som möjligt.

„Normalise.css rättar till allmänna buggar.”

Allmänna buggar i webbläsare för datorer och mobiler som ligger utanför återställningens omfattning kommer att åtgärdas. Detta inkluderar visningsreglerna för HTML5-element som teckenstorlekDe nya funktionerna omfattar korrigering av förformaterad text, SVG-överlappningar i IE9 och många plattforms- och webbläsaröverskridande buggar i formulär.

I följande exempel kan du se hur stilmallen normalise.css använder det nya HTML5-värdet för inmatningsattribut "Sök" av typattributet konsekvent och anpassningsbart i alla webbläsare:

/**
* 1. adressernas utseende inställt på sökfält i S5, Chrome
* 2. adressernas boxstorlek inställd på border-box i S5, Chrome (inkludera -moz för att framtidssäkra)
*/

input[type="search"] {
  -webkit-utseende: textfält; /* 1 */
  -moz-box-sizing: innehåll-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-storlek: content-box;
}

/**
* Tar bort inre stoppning och knappen för att avbryta sökning i S5, Chrome på OS X
*/

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-utseende: inget;
}

En återställning räcker ofta inte för att få webbläsarna att bli enhetliga när det gäller hur ett element ska visas. Detta gäller särskilt för formulär. Ett område där stilmallen normalise.css är till stor hjälp.

„Normalise.css gör inte felsökningsverktygen „röriga“.”

Om en normalise.css-stilmall används uppstår inte detta fenomen i lika stor utsträckning eftersom specifika stilar behandlas och multipla väljare endast används mycket sparsamt i regeluppsättningarna.

„Normalize.css är modulärt användbart.”

Projektet har delats upp i relativt självständiga delar. Detta gör det lätt att se vilka element som kräver specifika stilar. Det gör också att man kan ta bort ett avsnitt (t.ex. normalisering av formulär) om man vet att den egna webbplatsen aldrig kommer att behöva de definierade reglerna.

„Normalize.css har omfattande dokumentation.”

Normalise.css-koden är baserad på metodiska tester och exakta analyser över flera webbläsare. Koden är väldokumenterad i filen och beskrivs ytterligare i Github Wiki. Du kan därför undersöka exakt vad varje kodrad „gör“, varför den infogades, vilka skillnader det finns från webbläsare till webbläsare och detta gör det mycket lättare att utföra dina egna tester.

Projektet syftar till att klargöra hur webbläsare visar element som standard och göra det enklare att bidra med förbättringar.

Bästa praxis för integrering av Normalize.css

Installera först eller ladda ner stilmallen normalise.css från GitHub. Det finns olika sätt att använda Normalize.css på ett effektivt sätt. Du bör följa följande procedurer:

1. Anpassning till projektkrav: Använd Normalize.css som grund och anpassa den till dina specifika projektkrav. Det innebär att du använder filen som utgångspunkt för din egen grundläggande CSS och skriver över den vid behov.
2. Oförändrad integration: Alternativt kan du inkludera Normalize.css oförändrat i ditt projekt och sedan justera specifika stilar i en separat CSS-fil. Det är viktigt att din egen stilmall laddas efter integrationen av Normalize.css så att dina ändringar kan skriva över normaliseringen.
3. Optimerade laddningstider: Se till att du bara använder de delar av Normalize.css som du verkligen behöver. Den modulära strukturen gör det lättare att ta bort onödiga delar och därmed optimera laddningstiden för din webbplats.

Webbläsare som stöds

• Google Chrome (nuvarande)
• Mozilla Firefox (nuvarande)
• Mozilla Firefox ESR
• Opera (nuvarande)
• Apple Safari 6+
• Internet Explorer 8+

Avslutande anmärkningar

Formatmallen normalise.css skiljer sig från CSS reset när det gäller omfattning och utförande. Det är värt att pröva om det passar din projektutveckling och dina preferenser.

Projektet utvecklas offentligt på GitHub. Vem som helst kan rapportera problem och bidra med korrigeringar och tillägg. Den fullständiga projekthistoriken är offentligt tillgänglig och sammanhanget och skälen till alla kodändringar finns i „commit“-meddelandena och „issue“-inläggen.

Ytterligare läsmaterial

För att fördjupa dina kunskaper och arbeta direkt med Normalize.css hittar du en lista över användbara resurser här:

• „CSS: The Definitive Guide” av Eric Meyer - En djupgående bok som beskriver svårigheterna med CSS och ger användbara tekniker för att hantera inkompatibilitet mellan webbläsare.
• MDN Web Docs: „CSS Cross-Browser Development” - En utmärkt källa till aktuell information om plattformsoberoende CSS-utveckling.
• „HTML5 och CSS3 Allt-i-ett för dummies” av Andy Harris - Ger en lättbegriplig introduktion till HTML5- och CSS3-utveckling och visar hur Normalize.css kan integreras i moderna projekt.
• Normalise.css på GitHub - Officiell GitHub-sida för projektet med källkod och dokumentation.
• MDN Web Docs: „CSS User Agent Style Sheets” - Detaljerad information om standardstilarna för användaragenter i olika webbläsare.
• Detaljerad information om standardstilarna för UserAgent: WHATWG-förslag för rendering av HTML-dokument, Stilmallar för användaragenter i Internet Explorer, och CSS2.1 Standardinställningar för stilmallar för användaragenter.
• HTML5-boilerplate - En omfattande frontend-mall som integrerar Normalize.css för att ge en solid grund för alla webbprojekt.
• Web.dev: „Utformning för olika webbläsare” - Googles guide till hur man utformar webbplatser för ett brett utbud av webbläsare och enheter.

Med dessa resurser är du väl rustad för att integrera Normalize.css i dina projekt och enkelt klara av utmaningarna med kompatibilitet mellan webbläsare. Lycka till med din utveckling!