--- titel: Normalize.css - Vad är det? - isla Studio url: https://isla-stud.io/sv/css/normalize-css-was-ist-das/ datum: 2015-06-13 --- # Normalise.css - Vad är det här? Som webbutvecklare arbetar jag regelbundet med utmaningen att säkerställa konsekventa layouter i olika webbläsare. När jag gör det har jag upprepade gånger stött på Normalize.css - ett verktyg som har etablerat sig som oumbärligt för modern webbutveckling under de senaste åren. Låt oss dyka djupare in i ämnet 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? Normalize.css är ett CSS-bibliotek som utvecklats av Nicolas Gallagher och Jonathan Neal för att normalisera standardstilarna för HTML-element i olika webbläsare. Syftet är att eliminera skillnaderna i standardpresentationen av element utan att radera användbara webbläsarstandarder. Detta står i kontrast till klassiska CSS-resets, som tar bort alla stilar och lämnar utvecklare med uppgiften att omforma varje element från grunden. Normalize.css-stilmallen används för närvarande i olika projekt: Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, SoundCloud samt i många andra ramverk, verktygslådor och webbplatser. Stilmallen 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 det här 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. Djupare funktioner i Normalize.css Normalize.css erbjuder ett antal fördelar som går utöver ren normalisering: Konsistens i webbläsaren: den tar hand om många mindre men avgörande skillnader i visningen av element mellan olika webbläsare, t.ex. hantering av inmatningsfält, knappstilar och tabellayouter. Detta minskar ansträngningen för felsökning och säkerställer en standardiserad grund. Utökat stöd för HTML5: 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 visas elementet summary, som är avsett att användas i details-element, på ett konsekvent sätt i äldre webbläsare. Optimerad typografi: Normalize.css innehåller också typografiska justeringar för att säkerställa att texten är konsekvent och läsbar på alla plattformar. Detta inkluderar inställning av radhöjd, standardisering av teckenstorlek och borttagning av onödiga marginaler i standardtextelement. 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 avsevärda skillnader i utseende. Normalize.css normaliserar dessa stilar genom att tillhandahålla konsekventa basstilar för input-, textarea-, select- och button-element. Modulär struktur: Normalize.css-koden ä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 detta avsnitt, 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 uppnår 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 förenliga med moderna standarder som möjligt. „Normalise.css korrigerar allmänna buggar.” Allmänna buggar i webbläsare för datorer och mobiler som ligger utanför återställningens omfattning korrigeras. Detta inkluderar visningsreglerna för HTML5-element, korrigering av teckenstorlek för förformaterad text, SVG-överlappningar i IE9 och många plattforms- och webbläsaröverskridande buggar i formulär. Nedan kan du till exempel se hur stilmallen normalise.css gör det nya HTML5-värdet "search" för inmatningsattributet i typattributet konsekvent och designbart i alla webbläsare: /** * 1. adressernas utseende är 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 leder ofta inte till att webbläsarna får en enhetlig nivå 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 rör inte till felsökningsverktygen.“ Om en normalise.css-stilmall används uppstår inte detta fenomen i lika stor utsträckning eftersom specifika stilar adresseras och multipla väljare endast används mycket sparsamt i regeluppsättningarna. En välkänd vy i webbläsarens felsökningsverktyg när du använder en CSS-återställning ”Normalise.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 hjälpa till att klargöra hur webbläsare visar element som standard och göra det lättare att bidra med förbättringar. Bästa praxis för integrering av Normalize.css Installera eller ladda ner först stilmallen normalize.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: Anpassning till projektets krav: Använd Normalize.css som utgångspunkt 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 om det behövs. Oförändrad integration: Alternativt kan du integrera Normalize.css i ditt projekt oförändrat och sedan anpassa specifika stilar i en separat CSS-fil. Det är viktigt att din egen stilmall laddas efter integreringen av Normalize.css så att dina ändringar kan skriva över normaliseringen. 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+ Slutliga 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 prova 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 de komplicerade egenskaperna hos 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 uppdaterad information om CSS-utveckling över flera plattformar. „HTML5 and CSS3 All-in-One For Dummies” av Andy Harris - Ger en lättförståelig introduktion till HTML5- och CSS3-utveckling och visar hur Normalize.css kan integreras i moderna projekt. Normalize.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 användaragenter: WHATWG-förslag för återgivning av HTML-dokument, Internet Explorer User Agent Style Sheets och CSS2.1 User Agent Style Sheet Defaults. HTML5 Boilerplate - En omfattande frontend-mall som integrerar Normalise.css för att ge en solid grund för alla webbprojekt. Web.dev: „Designing for Browser Diversity” - Googles guide till hur man utformar webbplatser för ett brett utbud av webbläsare och enheter. Med dessa resurser kommer du att vara väl rustad för att integrera Normalize.css i dina projekt och enkelt klara utmaningarna med kompatibilitet mellan webbläsare. Lycka till med din utveckling!