Cross-browser css layout. Et sæt CSS3-egenskaber på tværs af browsere

Den første fil, der dukkede op, var reset.css. Denne css-fil indeholder en liste over alle mulige html-tags og nulstiller deres værdi. Det vil sige, at det fjerner alle mulige indrykninger, gør skrifttypen ens i alle tags, nulstiller alle tekststile. Så alle overskrifter og afsnit vises i almindelig tekst, samme størrelse og uden indrykning. Som et resultat får vi standardstilene nulstillet i alle browsere.

Det fungerer sådan her: først inkluderer vi reset.css-filen på siden, og derefter vores egen fil med stilarter. Som et resultat heraf nulstiller vi først alle stile, og først derefter indstiller vi designet af html-tags i style.css. På denne måde opnår vi, at alle browsere nulstiller deres stilarter til standard, og al opmærkning vil være baseret på de stilarter, som vi indstiller i style.css.

Du kan downloade reset.css på cssreset.com

Eller du kan downloade Eric Meyers "Nulstil CSS" 2.0 version ved at bruge knappen nedenfor fra min blog:

Efter at reset.css er forbundet til siden, skal alle styles omskrives. Og hver gang bliver denne aktivitet trættende. Derfor blev nulstilling erstattet af et andet værktøj - normaliser. Normailze - som navnet antyder, nulstiller ikke alle stilarter, men normaliserer dem, hvilket bringer dem til et enkelt udseende i alle browsere. Efter dens anvendelse er de grundlæggende stilarter til visning af overskrifter, skriftstørrelser, indrykning... samlet og vises identisk i alle browsere. Ved at bruge det kan du spare en vis mængde tid, som i tilfælde af nulstilling ville blive brugt på at skrive nulstillingsstile.

Hvis du ikke har brugt normalize.css endnu, anbefaler jeg at prøve det i dit næste projekt, og hvem ved, måske kan du ikke afvise det 😉

Du kan downloade normalize.css fra necolas.github.io/normalize.css

Eller download fra min blog:

Der er ikke noget klart svar.

Den første nulstiller alle stilarter, den anden fører til en enkelt nævner. Erfarne layoutdesignere, der bruger reset.css, har som regel deres egne sæt stilarter, der straks inkluderes efter nulstilling for at style indholdet. Og de behøver ikke at omdefinere stilarter for grundlæggende elementer hver gang i et nyt layout. Det gør jeg også. Jeg er komfortabel, og jeg ved, hvilke stilarter jeg indstiller som standard, og hvordan de fungerer.

normalisere er praktisk, hvis du studerer dets struktur, du kan ændre det, så det passer til dig selv - ved at justere det grundlæggende udseende af tags. Og det vil også være praktisk at arbejde med det i farten - når du skal sætte meget og ofte.

Hvert værktøj er godt, det vigtigste er at bruge det korrekt 😉

Cross-browser-kompatibilitet er et websteds evne til at blive vist korrekt i forskellige browsere. Ressourcen skal fungere ens i alle browserversioner.

Dette er især vigtigt i æraen med responsivt webdesign, hvor front-endens evne til at tilpasse sig en lang række forskellige enheder og stadig give en optimal seeroplevelse kommer i forgrunden.

Tidligere ville en designer lave et designlayout i Photoshop, som derefter blev overført til HTML og CSS. I dag tvinger teknologiske ændringer os til at gentænke dette koncept. Vi kan ikke længere forudsige, hvilken browser, opløsning eller enhed der vil blive brugt til at se siden. De dage er forbi, hvor de fleste computere brugte en fast opløsning på 1024 gange 768 pixels, og websteder kunne designes med statiske dimensioner.

Moderne browsere understøtter HTML5 og CSS3 fuldt ud. Men den samme HTML/CSS/JavaScript-kode fortolkes forskelligt i ældre browsere, hvilket fører til "cross-browser inkompatibilitet" af webstedet. Dette gælder især for ældre versioner af Internet Explorer.

I denne artikel vil vi se på aktuelle statistikker om websidevisninger og give en liste over værktøjer, der hjælper med at løse forskellige kompatibilitetsproblemer.

Global statistik for 2015 viser, at de 14 mest brugte skærmopløsninger spænder fra 1920 gange 1080 til 320 gange 480 pixels.

Selvom Windows 7 (31,20%) stadig har en stor markedsandel, begynder mobile platforme at erstatte traditionelle desktopplatforme.

Ser vi på statistikken for 2015 på de anvendte browsere, ser vi, at førstepladsen tilhører Chrome (alle versioner - 44,87%), andenpladsen - Firefox (alle versioner - 10,37%), tredjepladsen Internet Explorer 11 (6,84%).

Det accelererede tempo i udgivelsen af ​​nye versioner af Google Chrome og Firefox giver os mulighed for mere effektivt at udvikle projekter til disse platforme. Et lidt andet billede tegner sig for den "slemme fyr" Internet Explorer, fordi gamle versioner af den stadig kan findes på internettet. Og dette fører til problemer med webstedets kompatibilitet på tværs af browsere.

Microsoft stoppede med at understøtte IE6 den 8. april 2014. Og fra 2016 vil kun den nyeste version af Internet Explorer blive understøttet og opdateret. Dette betyder reelt, at understøttelsen af ​​IE7 og IE8 blev fuldstændig afbrudt i begyndelsen af ​​2016, uanset operativsystem. IE9 vil kun blive understøttet på Windows Vista, IE10 - kun på Windows Server 2012, IE11 - på Windows 7 og Windows 8.1:

Github understøtter ikke længere IE 7 og 8. Derudover virker nogle af Twitter-funktionaliteten ikke i IE8. Og endelig vil den populære ramme ikke understøtte IE8, startende med version 4.

Brugsstatistikker kan dog variere fra region til område, hvor 6,11 % af brugerne i Kina stadig browsede gennem IE8 i 2015. Hvis vi tænker på, at der var cirka 724.400.000 internetbrugere i Kina, kan det forstås, at cirka 44.200.000 kinesere fortsætter med at bruge IE8 i år.

Derfor kan regionale markeder, specifikke kunder og branchekrav variere betydeligt. Dette gælder især for virksomheder og offentlige myndigheder.

Grundprincippet her er dette: Jo højere den krævede cross-browser-kompatibilitet er, jo mere udviklingstid vil der kræves, hvilket fører til en stigning i omkostningerne ved projektet. For at træffe en informeret, økonomisk fornuftig beslutning skal du stille dig selv følgende spørgsmål:

• Hvad er din målgruppe?
• Hvilket geografisk område skal du målrette mod?
• Hvilke browsere og enheder bruger dine besøgende?
• Er der tekniske faktorer i din virksomhed eller branche, der tvinger dig til at understøtte specifikke versioner af ældre browsere?
• Fra et e-handelsperspektiv, hvad er konverteringsraterne og ROI for forskellige brugergrupper efter browserversion?

Ved at besvare disse spørgsmål ved hjælp af statistiske data, for eksempel fra Google Analytics, kan du få et objektivt billede.

Responsivt webdesign er stærkt afhængig af medieforespørgsler for at ændre CSS til forskellige skærmopløsninger. Derudover er moderne hjemmesider kendetegnet ved brugen af ​​HTML5 semantiske elementer (for eksempel , , , , ) til at gruppere designkomponenter. CSS3-vælgere bruges til at vælge specifikke elementer og derefter tildele stilarter (for eksempel , :checked , :nth-child(n) , :not(selector), :last-child) ). Endelig er responsiv typografi ofte specificeret ved hjælp af REM (root em) enheder.

Dette bringer os til følgende tekniske udfordringer, når vi implementerer CSS cross-browser-kompatibilitet:

• CSS3 medieforespørgsler
• HTML5 semantiske elementer: understøttes ikke i IE6, 7 og 8;
• CSS3-vælgere: Ikke understøttet i IE6. Kun delvist understøttet i IE7 og 8;
• REM-enheder: understøttes ikke i IE6, 7 og 8. Kun delvist understøttet i IE9 og 10;
• CSS-reglergrænse: IE9 og derunder understøtter kun 4095 CSS-vælgere. Reglerne efter 4095. vælgeren gælder ikke.

Ovenstående fejl vil have størst indflydelse på den strategi, der anvendes ved implementering af responsivt design.

Der er to hovedudviklingsstrategier: inkrementel forenkling og progressiv forbedring.

Progressive forbedringer er baseret på princippet om at starte udvikling fra en fællesnævner, med de tekniske minimumskrav og niveauet af brugeroplevelse, som webstedet tilbyder. Besøgende, der får adgang til webstedet ved hjælp af de nyeste browsere og enheder, vil blive behandlet med en gradvist forbedret version af webstedet med alle de nyeste funktioner.

På den anden side vil brugere af ældre browsere og langsomme internetforbindelser blive tilbudt en grafisk strippet, men stadig funktionel version af siden.

Denne tilgang til at implementere kompatibilitet på tværs af browsere involverer at starte udviklingen med en simpel version, hvortil mere komplekse elementer derefter tilføjes. Ældre browsere vil være i stand til at vise webstedet med et grundlæggende niveau af brugeroplevelse. Og nye HTML/CSS/JavaScript-funktioner vil være tilgængelige i browsere, der rent faktisk kan bruge dem.

I modsætning hertil giver trinvis forenkling et fuldt funktionelt niveau af UX i moderne browsere. Og derefter gradvist reducerer dens kompleksitet for ældre browsere på grund af grafik, men uden at røre ved funktionalitet. Tanken er at begynde at udvikle med de nyeste webstandarder og derefter forsøge at minimere problemerne forbundet med ældre browsere.

Hvilken tilgang du vælger afhænger af personlige præferencer og projektforhold:

• Progressiv forbedring giver større stabilitet, da du gradvist kan tilføje nye funktioner til moderne browsere. Men det kræver mere omhyggelig planlægning;
• Nogle udviklere hævder, at det ikke nytter noget at understøtte forældede browsere, og at de nyeste teknologier bør bruges. Understøttelse af moderne browsere giver en meget bedre brugeroplevelse;
• Der er en opfattelse af, at progressiv forbedring er død, fordi mange JavaScript-applikationer ikke fungerer godt med denne tilgang;
• Webtilgængelighed for offentlige institutioner kan være underlagt lokale lovkrav og kan kræve en specifik tilgang.

Med fremkomsten af ​​funktionsdetektionsværktøjer som Modernizr hælder jeg personligt til at bruge trinvis forenkling og browsersortliste, når jeg udvikler kompatible websteder.

For at opdage potentielle JavaScript-problemer på tværs af browsere så hurtigt som muligt, bør du teste dit websted i forskellige browsere og opløsninger under udviklingen. Der er forskellige softwareemulatorer, der kan hjælpe os:

• Browserstack er en kommerciel tjeneste, der giver adgang til et testmiljø, hvor du kan teste dit projekt på mere end 700 desktop-browsere og mobile enheder ved hjælp af en virtuel maskine i skyen;
• Microsoft Virtual Machines - Hvis du kører Linux, har du ikke adgang til Internet Explorer. En løsning kan være at downloade virtuelle maskinbilleder til IE6 til IE11, som derefter kan bruges sammen med Oracle VM Virtualbox eller Vagrant til lokal test;
• Forskellige skærmopløsninger for en bestemt browser kan hurtigt testes ved hjælp af onlinetjenesten Screenfly. Brug af browser-plugins såsom Window Resizer til Google Chrome eller direkte i udviklerværktøjssektionen i Chrome og Firefox.

Jeg starter normalt nye projekter ved at nulstille CSS'en ved hjælp af Normalize.css, som giver bedre kompatibilitet på tværs af browsere, når jeg definerer standard HTML-elementstile op til Internet Explorer 8. Normalize.css bevarer de ønskede stilarter af elementer, normaliserer deres udseende og retter en række fejl og uoverensstemmelser i forskellige browsere.

Derudover kan mange ældre browsere ikke fortolke ukendte HTML-elementer og CSS-egenskaber. Når browseren støder på et stykke HTML eller CSS, som den ikke forstår, ignorerer den det og fortsætter gengivelsesprocessen. Mange applikationer bruger leverandørpræfikser til at tilføje nye, eksperimentelle eller ikke-standardiserede CSS-funktioner, før de implementeres i specifikationen:

// Webkit-browsere såsom Chrome og Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Problemet er, at præfikser er besværlige at bruge og har mange fejl forbundet med dem. Så jeg bruger CSS Autoprefixer plugin i kombination med Grunt.

Almindelige CSS-regler vil blive behandlet af plugin'et og præfikset baseret på "Can I Use"-databasen. Det anbefales at angive i konfigurationen de versioner af browsere, der skal understøttes, for eksempel:

valgmuligheder: (browsere: ["sidste 2 versioner", "dvs. >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4") )

Som et eksempel kan du overveje følgende CSS-klasse:

Eksempel (baggrundsbillede: lineær-gradient(øverst til venstre, #4676dd, #00345b); display: flex; overgang: 1s alle; )

Ved hjælp af CSS Autoprefixer konverteres det til:

Eksempel (baggrundsbillede: -webkit-lineær-gradient(øverst til venstre, #4676dd, #00345b); baggrundsbillede: -moz-lineær-gradient(øverst til venstre, #4676dd, #00345b); baggrundsbillede: lineær- gradient (øverst til venstre, #4676dd, #00345b display: -ms-flexbox: 1s alle;

Hvis du har brug for at oprette reserve-CSS eller aktivere JavaScript på tværs af browsere for tidligere versioner af Internet Explorer, kan du bruge betingede kommentarer. De understøttes i Internet Explorer 5-9, de bruger HTML-kommentarsyntaks i kombination med booleans. Afhængigt af den booleske værdi (sand eller falsk), vil koden inde i kommentarmærkerne blive vist eller skjult i de tilsvarende browserversioner:

KODE, DER VIL BLIVE UDFØRT // hvis Internet Explorer // hvis IKKE Internet Explorer // hvis Internet Explorer 7 // hvis IKKE Internet Explorer 7 // hvis Internet Explorer 9 eller LAVERE // hvis Internet Explorer 7 eller HØJERE // hvis Internet Explorer 6 ELLER 7 // hvis HØJERE Internet Explorer 6 MEN UNDER 9

Koden er automatisk skjult i alle browsere, der ikke understøtter betingede kommentarer. Et tydeligt eksempel på, hvordan betingede kommentarer kan bruges effektivt i praksis, er HTML5 Boilerplate, som tilføjer specifikke CSS-klasser til ældre versioner af Internet Explorer:

Tekniske uoverensstemmelser i ældre browsere til responsivt webdesign kan rettes ved hjælp af en polyfill. Det er et stykke JavaScript-kode, der "udfylder" et specifikt funktionelt hul mellem en ældre browser og en funktion. Der er en række polyfills, der kan bruges til at give browserunderstøttelse af HTML5-funktioner.

Nedenfor er flere polyfills designet til at eliminere webstedets cross-browser problemer nævnt i punkt 3:

• respond.js - implementerer CSS3 medieforespørgsler til Internet Explorer 6 - 8;
• html5shiv tillader brugen af ​​HTML5 semantiske elementer i Internet Explorer 6 - 8;
• selectivzr - Emulerer CSS3-selektorer og pseudoklasser i Internet Explorer 6 - 8. Fuld support kræver enten Mootools 1.3 eller NWMatcher 1.2.3. Delvis support er tilgængelig med JQuery 1.3/1.4;
• REM-unit-polyfill - Bestemmer om browseren understøtter rem-enheder og giver et fallback. Fungerer med IE8 og derunder.

For at bruge de angivne polyfills skal de tilføjes fra CDN eller som en fil i det korrekte format i de betingede kommentarer i sektionen (glem ikke at inkludere et af de JavaScript-biblioteker, der kræves til Selectivizr):

For hvert projekt skal du vurdere, om disse ekstra scripts virkelig er nødvendige, da de kan føre til ydeevneproblemer. De fleste polyfills er kompakte, men hvert ekstra script, der indlæses, repræsenterer en ekstra HTTP-anmodning. Dette kan forsinke sideindlæsningen.

Modernizr-biblioteket, skrevet i JavaScript, hjælper dig med at kontrollere et websteds kompatibilitet på tværs af browsere: om en specifik HTML5- eller CSS3-funktion understøttes i forskellige browsere. Hvis funktionen ikke er tilgængelig, kan alternativ CSS- eller JavaScript-kode blive indlæst.

Ideen er direkte at bestemme browserens funktionalitet i stedet for at prøve at installere en bestemt version af den. Og baseret på dette, udled dens funktionalitet, hvilket er en mindre effektiv og pålidelig måde.

Det er værd at bemærke, at Modernizr ikke tilføjer manglende funktioner til browseren. Derfor skal du angive kode fra fallback CSS eller polyfill.

Først skal du downloade den fuldt funktionelle samling. Senere, når du er klar til at udvikle, kan du oprette en brugerdefineret build med de specifikke funktioner, du tester. Alt du skal gøre er at tilføje .no-js-klassen til dit websteds HTML-tag og inkludere Modernizr-scriptet i head-sektionen efter enhver CSS-fil:

Modernizr Demo Modernizr Demo

Dette er en Modernizr-øvelse.

.no-js-klassen bruges til at kontrollere, om JavaScript er aktiveret i brugerens browser. Hvis aktiveret, vil Modernizr erstatte .no-js med .js-klassen. Modernizrs testfunktion analyserer, om en bestemt funktion er understøttet i browseren og genererer en række klasser, der føjes til HTML-elementet. Google Chrome 47.0.2526.111 vil for eksempel returnere følgende objektklasser.

I øjeblikket er Modernizr tilgængelig som et globalt objekt, der kan kaldes sammen med et funktionsnavn for at kontrollere, om det eksisterer. Det returnerer en boolesk værdi (sand eller falsk).

Lad os se på to simple eksempler på CSS og JavaScript.

Et eksempel på løsning af CSS-problemer på tværs af browsere: at tjekke for SVG-understøttelse og levere PNG som en reserve

Den nuværende tendens går i retning af i stigende grad at bruge SVG (Scalable Vector Graphics), men denne grafik understøttes ikke i IE8 og derunder. Hvis SVG understøttes i browseren, genererer Modernizr CSS-klassen .svg . Hvis SVG ikke er tilgængeligt, tilføjer værktøjet .no-svg-klassen til HTML. Med CSS nedenfor vil browsere, der understøtter SVG, bruge den almindelige .logo-klasse, mens browsere, der ikke understøtter SVG, vil bruge .no-svg-reglerne:

Logo (baggrundsbillede: url("logo.svg"); bredde: 164px; højde: 49px; ) .no-svg .logo (baggrundsbillede: url("/logo.png"); bredde: 164px; højde : 49px)

JavaScript-eksempel: Definition af grænse-radius og tilføjelse af passende CSS-klasser

Afrunding af rammehjørner understøttes ikke i IE8 og derunder. Vi kan oprette forskellige CSS-klasser, der anvendes afhængigt af tilstedeværelsen af ​​grænse-radius-funktionen:

// Klasse for en browser med border-radius-funktionen .round-borders ( border-radius: 5px; ) // Klasse for en browser uden border-radius-funktionen .black-borders ( border: 3px solid #000000; )

Nu kan du bruge JavaScript til at gemme mål-id'et som en variabel og derefter tilføje CSS-klasser via en betingelse:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else ( element.className = "black-borders"; )

Når det kommer til responsivt webdesign på ældre browsere, er der ingen ensartet løsning. Det er vigtigt at analysere ressourcens publikum for at få en idé om det reelle antal browserbrugere. Dernæst skal du teste webstedet grundigt for at identificere potentielle problemer på tværs af browsere.

På grund af disse forskelle i fortolkningen af ​​parameterværdier sker det ofte, at websteder og webgrænseflader, der ser fine ud i Mozilla Firefox, Opera og Safari-browsere, pludselig begynder at afvige i Internet Explorer-browseren.

Grundlaget for disse forskelle i browserfortolkning af CSS er manglende overholdelse af Internet Explorer-browsere før version 7 med CSS-standarderne vedtaget af W3C. Derfor skal du bruge en række specielle konstruktioner kaldet CSS-hacks for at få et vellykket layout uden bord til versioner tidligere end IE 7. Det er også vigtigt at bemærke, at for andre browsere er det nogle gange nødvendigt at bruge et CSS-hack.

Lad os overveje, hvordan man skriver CSS, der kun ville blive fortolket af visse typer browsere:

Dokument indholdsfortegnelse

For at bruge dem har du brug for:

Det første eksempel vil forbinde typografiarket til enhver version af Internet Explorer, hvis første ciffer er 5:

Alternativt kan du angive, at stylesheets opretter forbindelse til enhver browserversion mindre end 6:

I stedet for lt (mindre t hen - mindre) kan du også bruge lte (mindre t hen eller lig med - mindre eller lig), gt (g reater t hen - mere), gte (g reater t hen eller lig til - større end eller lig med), det vigtigste med al denne række af muligheder er at vælge rækkefølgen for at specificere betingede kommentarer korrekt, for ikke at komme i en situation, hvor grupper af betingede kommentarer for nogle browsere krydser hinanden, hvilket giver en uventet resultat.

Hvis du bruger flere versioner af Internet Explorer på samme maskine, vil alle disse versioner foregive at være den nyeste installerede version. Dette betyder, at hvis du har IE6 installeret, men ser siden ved hjælp af IE5, vil denne betingede kommentar blive udført:

Men denne betingede kommentar vil ikke blive udført:

For den mest nøjagtige sporing af forskelle i behandlingen af ​​CSS af forskellige versioner af IE, har det gratis program IETester, som understøtter alle versioner af IE fra 5 til 8, fungeret godt. Og til hurtigt at ændre CSS-parametre i IE8 ved at trykke på F12. et udviklerværktøj er tilgængeligt, der minder om FireBug i Mozilla Firefox.

I lighed med at deklarere typografiark, kan denne metode skjule HTML-kode fra specifikke eller alle versioner af IE. For eksempel vil teksten "HTML-kode" blive vist i alle browsere undtagen IE6, hvis du sætter den i en betinget kommentar som denne:

HTML-kode

I lighed med betingede kommentarer, understøtter IE 5--IE 8 tagget .... Dette tag giver dig mulighed for at skjule oplysninger fra IE-brugere, således koden:

Dette er ikke Internet Explorer

IE-brugere vil blive vist som: Dette er Internet Explorer, og brugere af andre browsere vil blive vist som: Dette er ikke Internet Explorer.

Tagget er ikke gyldigt.

Til IE alle versioner. Hvis du præfikser en egenskab med to skråstreger (//), vil den kun blive accepteret af IE-browsere af alle versioner. Andre browsere vil ignorere denne egenskab.

I IE6 er det muligt at sætte et minustegn (-) eller en understregning (_) foran en egenskab uden at IE7 reagerer på det. Du kan også bruge følgende konstruktion:

* html .style (...)

For eksempel:

Stil (baggrund: rød; /* for normale browsere */ //baggrund: grøn; /* for alle IE */ -baggrund: blå; /* for IE6 */) * html .style (baggrund: blå; /* andet metode til IE6 */ )

I dette tilfælde vil baggrunden være rød i Opera- og Firefox-browsere, grøn i IE7 og blå i Internet Explorer 6.

Eksemplet ændrer baggrundsfarven for forskellige browsere. I praksis bruges denne metode til at opnå identisk visning og cross-browser-kompatibilitet. Oftest skal du ty til det, når du positionerer og indstille forskellige værdier for egenskaber som venstre, top, polstring, margin, bredde og andre relateret til størrelser, procenter og pixels.

Til IE7 bruges et CSS-hack:

*: første-barn+html .style ( ...)

*+html .style ( ...)

html: root .style ( ...) /* dette virker også for Safari */

Stil, x: -moz-any-link (...)

For hurtigt at ændre CSS-parametre i Firefox ved at trykke på F12, er Firebug-udviklerværktøjet tilgængeligt (kræver foreløbig installation) - det er det bedste blandt analoger.