Från författaren: Människor använder olika webbläsare för att visa webbsidor. Naturligtvis finns det de mest populära, som Chrome. Det finns också mindre använda (Safari, Internet Explorer), men om du gör en webbplats för människor bör du veta om kompatibilitet över webbläsare - hur man gör det och vad det handlar om. Låt oss titta på hur du säkerställer att din webbplats visas på samma sätt i alla större webbläsare.
Huvudmålet med funktionalitet över webbläsare är att förhindra betydande förändringar i webbplatsdesign i olika webbläsare. Om skillnaden bara är i små detaljer och detta inte påverkar den övergripande uppfattningen av webbplatsen, kan vi säga att du har hanterat problemet med flera webbläsare. Men ändå, vilka verkliga råd kan ges i denna fråga?
Hur man uppnår kompatibilitet över webbläsareFör tillfället finns det 5 huvudsakliga mest populära webbläsare som du behöver för att optimera din webbplats. Och även om de senaste versionerna av webbläsare vanligtvis är lätta att bli vän med, kan det bli fler problem ju äldre versionen är.
Till exempel är IE6 en av de mest problematiska webbläsarna när det gäller att stödja nya html-taggar och css-egenskaper. Och ändå kräver vissa idag fortfarande att webbplatsen visas normalt i den här webbläsaren. Enligt min mening är detta redan för mycket. IE8-stöd är tillräckligt.
Detta är dock en liten utvikning. Låt oss nu titta på de verkliga stegen som hjälper till att göra din webbplats kompatibel med flera webbläsare.
Få ut det mesta av färdiga lösningar. Om du vill implementera nya egenskaper och lära äldre webbläsare att förstå dem behöver du JavaScript-bibliotek. I det här fallet finns det helt enkelt ingenstans utan dem. Du måste installera jQuery.
Det finns ett så underbart javascript-bibliotek som heter Modernizr. Dess funktioner låter dig implementera ett alternativ för de egenskaper som inte stöds. Detta är vad jag rekommenderar att du också använder.
Så först måste du gå till den officiella webbplatsen. https://modernizr.com/download. Här måste du bocka av de tekniker som du planerar att använda på din webbplats. Det måste sägas att listan är ganska lång och utan en genomsnittlig kunskap om moderna webbstandarder och det engelska språket kommer du knappast att kunna lista ut det. Det finns i alla fall också intuitiva egenskaper. Även om du markerar alla rutorna kommer den resulterande koden inte att vara för krånglig.
Ris. 1. Välja tekniker som biblioteket ska kontrollera.
Kontrollerar bibliotekets funktionEfter att ha laddat ner den anpassade versionen av biblioteket måste du kontrollera dess funktion. Den måste anslutas med en skripttagg som anger sökvägen till filen. Om allt stämmer bör html-taggen ha många nya stilklasser. Dessa klasser är namngivna efter de teknologier som du har kontrollerat.
>p? Följaktligen, om en sådan klass anges i html-taggen, betyder det att tekniken fungerar i den här webbläsaren. Om något inte stöds registreras klassen "no-name of technology". Låt mig ge dig ett exempel direkt:
Du måste till exempel kontrollera egenskapen box-shadow. Som referens ställer den in skuggan av elementet. Om webbläsaren stöder det, kommer denna stilklass att visas i html-taggen. Om webbläsare inte känner igen egenskapen kommer klassen "no-boxshadow" att visas.
Ris. 2. Du kommer att se många klasser i html-taggen. I det här fallet ser vi att webbläsaren stöder nästan alla tekniker.
Nu är kontrollen över webbläsarkompatibilitet helt i dina händer. Det räcker med att ställa in no-boxshadow-klassen några alternativa egenskaper och i alla webbläsare som inte stöder box-shadow-egenskapen kommer dessa regler att tillämpas istället. Det är väldigt bekvämt.
Jag hittade ett annat exempel på Habrahabr som jag skulle vilja ge dig här. Det fanns ett exempel på hur biblioteket kan användas för att implementera alternativ i äldre webbläsare.
Multiplebgs selector ( background-image: url("image.png") center 40px no-repeat, url("image2.png"); ) .no-multiplebgs selector ( bakgrundsbild: url("image.png") center 40px no-repeat ljusgrå)
Multiplebgs-väljare (bakgrundsbild : url ("image.png") center 40px no-repetition , url ("image2.png" ); ) No-multiplebgs selector (bakgrundsbild: url ("image.png") center 40px no-repetition ljusgrå;) |
Exempel förklaring. Vi är intresserade av tekniken med flera bakgrunder, som länge har stötts i CSS3. För att göra detta, lista bara adresserna till bilderna och deras parametrar separerade med kommatecken. Naturligtvis stöder inte äldre webbläsare detta, så vi skriver våra egna stilar för dem med klassen .no-multiplebgs. Den anger att stilar ska tillämpas om webbläsaren inte stöder flera bakgrunder.
Således kan du ställa in andra stilar för denna väljare och på så sätt få en vacker visning av webbplatsen i vilken webbläsare som helst. Naturligtvis, för att fullt ut uppleva funktionerna i Modernizr, måste du ha en god förståelse för webbprogrammering och webbdesign. En erfaren person kommer att kunna avgöra vilka fastigheter som kan ersätta de som har mycket dåligt stöd.
Funktionaliteten i biblioteket är naturligtvis mycket bredare. Du kan testa stöd för olika tekniker och koppla händelser till resultatet. Exempel.
Från författaren: CSS-layout är i själva verket det andra steget i webblayouten. Och definitivt väldigt viktigt, för i slutändan är det det som formar webbplatsens utseende. Idag skulle jag återigen vilja betona några viktiga principer för att arbeta med cascading style sheets.
Layout med css - vad är det och varför behövs det?Tja, först ett litet förtydligande för nybörjare. Css är ett underbart språk som helt består av egenskaper och deras värden. Samma egenskaper låter dig påverka utseendet på element på ett visst sätt. Till exempel, egenskapen color definierar färgen på texten, bakgrunden – bakgrunden för elementet, typsnittet – dess typsnitt, etc., etc.
Det finns egentligen inte så många egenskaper, så CSS kan kallas en ganska enkel webbteknik som lätt kan lära sig. En annan sak är att tekniken har förmågan att ständigt gå framåt, speciellt teknik inom området webbbyggande.
Så CSS uppfanns för att skapa utseende. Och han klarar sin uppgift underbart. HTML låter dig skapa element, skapa uppmärkning och CSS låter dig designa det hela. Dessa två språk är oskiljaktigt kopplade, så om det ena tas bort blir det andra helt enkelt underlägsen.
Därför, i början av arbetet, skapar layoutdesignern alltid en struktur, de nödvändiga elementen och designar sedan allt.
Grundläggande saker du kan göra i cssTabelllayout med css. Faktum är att tabeller som typsättningsmetod till stor del övergavs på grund av den krångliga html-koden, men för inte så länge sedan dök det upp funktioner i CSS som gjorde det möjligt att förvandla alla element till tabellformade. Här är de: Display: table, display: table-row, display: table-cell.
Följaktligen bestämmer egenskapen display hur ett visst element kommer att visas på sidan. Det första värdet omvandlar det önskade elementet till en tabell, det andra till en tabellrad och det tredje till en separat cell. Så tack vare sådana enkla manipulationer kan du skapa en konstgjord tabell på sidan utan en enda tabell eller td-tagg i koden.
Layout för flera webbläsare. Hur CSS kan hjälpa till med dettaOch det kan hjälpa väldigt enkelt - återställ alla indrag och regler som webbläsare kan lägga till som standard, så kommer du redan att uppnå en viss kompatibilitet över webbläsare. Webbläsare fungerar åtminstone enligt dina regler och inte du enligt deras. Detta tillvägagångssätt kallas även css-återställning. Det vill säga, en uppsättning stilar skapas som återställer inställningarna till standard.
Det finns många olika alternativ för css-återställning på webben, eftersom alla webbutvecklare gillar att göra det annorlunda. I den mest primitiva versionen kan återställning av stilar göras så här:
stoppning: 0; marginal: 0; ul( list-style: ingen; |
Det vill säga, vi tog helt enkelt bort all inre och yttre stoppning och alla element, och tog även bort kulor från listor, eftersom få människor använder dem idag. Syftet med en css-återställning är att låta dig börja styla från början.
Figur 1. Var och en av dessa kamrater måste vara nöjda, annars kan du förlora potentiella webbplatsbesökare.
Adaptiv layout i cssAdaptiv layout är generellt sett en separat gren inom webbutveckling, men i den här artikeln kommer jag bara att förklara för dig vad det är med ett enkelt exempel. Generellt tycker jag att den heter väldigt korrekt. Att anpassa sig betyder att förändra. Och i webbplatsbyggande behöver du i princip ändra för olika skärmupplösningar. Det är upp till webbplatsen att ändra, jag menar, inte personen.
Generellt sett är anpassningsförmåga idag nästan en obligatorisk parameter för en normal webbplats. Dess kärna är att webbplatsens design och dess struktur ändras något vid olika skärmupplösningar. På till exempel smartphones och surfplattor försvinner sidospalten och på stora skärmar slutar layouten att förstoras och centreras.
Anpassningsförmågan implementeras med hjälp av så kallade media queries. Vanligtvis skrivs de direkt i huvudformatfilen. Ett enkelt exempel på en mediefråga:
@media and only screen (max-width: 600px)( img( float: none; ) )
@media och endast skärm (max - bredd: 600px) ( img ( flyta: ingen; |
Vad händer? Med denna begäran sa vi till webbläsaren att om skärmens bredd är mindre än 600 pixlar måste den sluta linda text runt bilder. För vad? Tja, om så bara för att bilden och texten på en rad, bara 600 pixlar bred, kommer att se väldigt dåligt ut.
Grunden för anpassningsförmåga läggs med hjälp av egenskapen maxbredd. Till exempel betyder max-width: 1320px att det maximala blocket kommer att sträcka sig med 1320 pixlar, men om fönsterstorleken är mindre kommer den också att minska. Ingen horisontell rullning!
Fig.2. Ett exempel på att skriva mediafrågor. Som du kan se kan en mall kräva ett anständigt antal regler och stilar för att implementera normal lyhördhet.
Vilken editor ska jag använda för att arbeta med css?Naturligtvis bör ett program för CSS-layout vara mer eller mindre intelligent – med stöd för syntaxmarkering som ett minimum, eftersom detta är väldigt viktigt för den visuella uppfattningen av koden.
Skärmdumpen av koden du just såg togs från programmet Notepad++, där css-filen öppnades. Det förefaller mig som att den här editorn helt enkelt är perfekt för att arbeta med det här språket - de olika komponenterna i koden framhävs mycket väl, och om utvecklaren också följer vissa designregler, så läses koden bra.
Lär dig css bättreKompatibilitet över webbläsare, anpassningsförmåga, arbete med tabeller och mycket mer - allt detta kan övervägas separat under mycket lång tid, eftersom css ger oss allt vi behöver för att implementera ett utmärkt utseende för webbplatsen.
Du kan lära dig mer om hur du använder den här tekniken när du designar för mobila enheter. Också i vår premiumsektion kan du hitta träningslektioner om grunderna i denna teknik, såväl som mer avancerat material på CSS3, så du behöver inte leta efter något, allt finns redan där, bara ta det och lär dig.
Det är omöjligt att i en så kort artikel berätta i detalj om allt som layout med CSS-teknik ger, men jag tror att du fångade några poäng. För att skapa en webbplats är detta helt enkelt ett nödvändigt språk, som du inte kan vara utan, och materialet på vår webbplats, av vilka många är gratis, hjälper dig att lära dig det. Jag rekommenderar också att du prenumererar på uppdateringar för att göra det lättare att få nya lektioner från oss.
Hej kära läsare!
Vi vill alla att stilarna vi skriver ska visas korrekt i olika webbläsare. Men vad man än kan säga så måste du lägga till stilar så att de fungerar i andra webbläsare. Denna process kallas att göra webbplatslayouten kompatibel med flera webbläsare. Cross-browser-kompatibilitet är när css-stilar visas korrekt i olika webbläsare och deras olika versioner.
Jag skulle vilja ge några tips om processen att ta med din CSS till kompatibilitet över webbläsare tog kortare tid.
2. Du kan söka efter de mest populära css-stilar, som ser felaktiga ut i andra webbläsare. Hitta CSS-hack för dem.
3. Det finns specialverktyg på webben för att skapa stilar för flera webbläsare. Jag skulle vilja lyfta fram de 2 mest intressanta enligt mig.
Verktyg för CSS-kompatibilitet över webbläsare.- Många stilar beskrivs;
- Det finns ett exempel på användning med resultatet.
- Till en början är det svårt att navigera på webbplatsen;
- Du kan inte generera en stil med dina egna parametrar (ett exempel på dess användning ges).
CSS3 Generator
- Bekväm och intuitiv att använda;
- Du kan skapa stilar för dina parametrar;
- Du kan se resultatet av den genererade stilen.
- Lite stilar
Vilken webbdesigner eller layoutdesigner som helst vet hur CSS3 kan göra livet enklare, snabba upp och optimera layoutprocessen. Egenskaper som "border-radius" och "box-shadow" gör det möjligt att undvika användningen av onödiga bilder och dussintals rader kod, vilket i sin tur påskyndar webbplatsens layoutprocess och ökar dess laddningshastighet. När jag använde CSS3 i mitt arbete, stötte jag på problemet med kompatibilitet över webbläsare, nämligen webbplatser som visas i äldre webbläsare och, naturligtvis, i Internet Explorer. Idag kommer jag att berätta vilka verktyg jag använder för att uppnå kompatibilitet över webbläsare av CSS3, inklusive Internet Explorer.
Låt oss ta en närmare titt på ett antal metoder som kan användas för att uppnå användning av CSS3 över webbläsare.
PRIMÄRA INSTÄLLNINGAR
Ladda ner skripten och kopiera dem till samma mapp med CSS-stilarna. Här är en lista över skript som vi behöver: CSS3 PIE är vår assistent i arbetet med IE. PIE lär Internet Explorer att förstå CSS3. CSS3PIE-nedladdningsmappen innehåller alla filer vi behöver. Vi kommer att använda filen PIE.htc och kommer åt den via CSS, så vi måste placera den i samma mapp som stilfilerna.
Selectivizr används för att hantera CSS3-väljare. Det används i kombination med JavaScript-bibliotek som jQuery eller Mootools. Jag rekommenderar att du väljer Mootools eftersom det stöder alla Selectivizr-funktioner (CSS-väljare).
I det här exemplet kommer jag att använda Google-värd med Mootools-biblioteket, för att göra detta kommer jag helt enkelt att klistra in den nödvändiga koden i huvudet:< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
Vi kan också använda jQuery för att få ett CSS3 text-shadow-alternativ. Allt vi behöver göra är att ladda ner jQuery text-shadow plugin, och ansluta den med jQuery: Bra, nu kan vi börja lösa CSS3 problem med flera webbläsare.
RUNDA HÖRN (GRÄNSRADIUS)
Att runda hörn är förmodligen det bästa CSS3 har gett oss. Lyckligtvis kan du använda den och inte vara rädd för felaktig visning i Internet Explorer. CSS3PIE hjälper oss med detta.
border-radius: 10px ;
beteende: url (PIE.htc);
Som du kan se behöver vi bara "anropa" PIE-skriptet efter egenskapen border-radius.
BOX-SHADOW & RGBA-FÄRGER
Precis som med border-radius, för att stödja Internet Explorer med rundade hörn, behöver du bara ansluta PIE-skriptet. Kom också ihåg att vi kan använda RGBA-värden.
box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , . 75);
beteende: url (PIE.htc);
Du kan också använda RGBA-färger när du anger egenskaperna för "bakgrundsfärg".
DUBBEL BAKGRUND
Och återigen använder vi prefixet -pie-:
bakgrund: url (img/flash.png) 20px 20px no-repeat , url (img/airplane.png) 90px 50px no-repeat , #00BFF3 ; /* Moderna webbläsare */
Paj-bakgrund: url (img/flash.png) 20px 20px no-repeat, url (img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
beteende: url (PIE.htc);
GRÄNS-BILD
Den sista CSS3-egenskapen som PIE stöder är border-image:
border-image: url (border.png) 27 27 27 27 rund rund;
beteende: url (PIE.htc);
CSS3-VÄLJARE
Det är dags att använda Selectivizr. Vi ansluter JavaScript som visas ovan, och alla CSS3-väljare kommer att vara tillgängliga för IE6+!
tabell tr:första barn (
bakgrund: #252525 ;
tabell tr:nth-child(2 n+ 1) (
bakgrund: #ebebeb ;
TEXT-SKUGGA
Den här egenskapens kompatibilitet över webbläsare kan enkelt uppnås med hjälp av jQuery-biblioteket. När vi har anslutit den anropar vi helt enkelt funktionen "textShadow()" för den önskade väljaren:
$(document).ready(function ()(
$(".txt").textShadow();
För full effekt, lägg helt enkelt till "text-shadow" till dina CSS-stilar.
text-shadow: 2px 2px 2px svart;
Dvs FILTER
För att ersätta vissa CSS3-regler kan du också använda IE-filter. Här är ett exempel på en bakgrundsgradient:
bakgrund: #FFFFFF ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */
Följande egenskap motsvarar regeln "transform". Men dess syntax är så komplicerad att jag rekommenderar att du använder en speciell generator för att beräkna det nödvändiga värdet.
/* IE8+ - måste vara på en rad, tyvärr */
Ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.1736481776693127, M21=0.17364817766692107, M804=Metod.5027,5 expandera")" ;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11 = 0,9848077530122079,
M 12 = -0,17364817766693127,
M21 = 0,17364817766693127,
M22 = 0,9848077530122079,
SizingMethod= "autoexpansion");
marginal-vänster: -14px ;
margin-top: -21px ;
Kompatibilitet över webbläsare hänvisar vanligtvis till en webbplatss förmåga att se likadan ut (eller lika bra) i alla webbläsare.
För att webbplatsen ska se så identisk ut som möjligt i alla webbläsare (moderna + stöd för vissa föråldrade), behöver du känna till olika tekniker och funktioner hos webbläsare. Vi ska studera dem nu.
Blockera. Moderna webbläsareFör närvarande är följande webbläsare populära: Internet Explorer (förkortat IE, en webbläsare från Microsoft, inbyggd i Windows), Opera (en norsk webbläsare), Mozilla (aka Firefox), Google Chrome (en webbläsare från Google), Safari (en webbläsare från Apple). Webbläsare för mobila enheter: Android, iOS.
Blockera. WebbläsarmotorerFörutom webbläsare finns det en sådan sak som motor webbläsare. Motorn är kärnan i webbläsaren, som konverterar HTML och CSS till en synlig bild på skärmen. Det finns mycket färre motorer än det finns webbläsare och som ett resultat har många webbläsare samma motorer och därför samma funktioner och buggar (problem).
Typer av motorer: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera upp till version 14). Trident (Internet Explorer).
Observera att Opera, från och med version 14, bytte till Webkit-motorn.
För närvarande har Webkit delat upp sig i två Blink-motorer från Google Chrome och Opera 14+ och en motor från Safari. Dessa två motorer stöder fortfarande prefixet -webkit, men deras separation kan redan ses i vissa CSS-egenskaper, som bindestreck
Webbläsaren Internet Explorer finns officiellt inte längre, dess senaste version är den 11:e. Men i själva verket har den här webbläsaren bytt namn (men inte motorn) och heter nu Edge.
Blockera. LeverantörsprefixDen nuvarande situationen bland webbläsare är att innan en CSS-egenskap visas i specifikationen kan webbläsare implementera en testversion av den egenskapen med ett speciellt prefix som kallas säljarens prefix(från ordet leverantörer - utvecklare, prefix för utvecklare).
Låt oss titta på hur detta ser ut med hjälp av exemplet med egenskapen box-sizing (ändra blockmodellen).
P ( boxstorlek: border-box; )
Den här egenskapen stöddes endast i Firefox 29, men har varit tillgänglig med prefixet -moz sedan Firefox 2:
P ( -moz-box-storlek: border-box;)
Andra webbläsare har liknande prefix: -moz - Mozilla/Firefox (Gecko-motor), -webkit - webbläsare baserade på Webkit-motorn (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera upp till version 13 inklusive (Presto-motor ), -ms – IE från version 8+.
Således kommer den mest webbläsarversionen av box-sizing-egenskapen, med leverantörsprefix, att se ut så här (det finns inget behov av att skriva det med -ms-prefixet, IE bytte omedelbart till att stödja denna egenskap):
P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )
I CSS har många egenskaper en liknande implementering: med eller utan prefix.
Observera också att Opera har bytt till Webkit från version 14 och kommer nu att använda -webkit-prefixet, medan -o-prefixet endast kommer att finnas kvar för äldre versioner (upp till 14).
Det finns följande regel: egenskaper med prefix skrivs före egenskaper utan prefix. Detta görs för att huvudegenskapen ska åsidosätta prefixegenskaper, eftersom webbläsaren kan stödja en egenskap med eller utan prefix. Och en fastighet med ett prefix kan fungera med vissa problem.
För närvarande har vissa webbläsare beslutat att överge prefix på grund av deras besvär. Och nu istället för dem använder de den så kallade flaggor. Egenskaperna är nu inbäddade i webbläsaren men är inaktiverade som standard, men de kan aktiveras i webbläsarinställningarna genom att markera lämplig ruta i inställningarna. För närvarande stöder webbläsarna Google Chrome och Opera den här modellen för nya egenskaper.
Blockera. Var kan jag se vilka prefix som ska skrivas?Jag rekommenderar en speciell tjänst caniuse.com, där du kan se vilka egenskaper som redan kan användas och om du behöver skriva prefix för dem eller inte.
Blockera. WebbläsarstatistikFör att veta vilken webbläsare som bör stödjas för närvarande, och vilken som bör överges, måste du spåra statistik på webbläsare i området för webbplatsen. Detta kan göras med hjälp av följande tjänst: gs.statcounter.com - alla webbläsare med versioner per land (engelska).
Blockera. Hur man testar en webbplats i olika webbläsareNär du har skapat en webbplats måste du testa den i alla populära webbläsare. Att göra detta är dock inte så lätt som det verkar – inte bara skiljer sig webbläsare från version till version, utan det finns också skillnader mellan en version av webbläsaren på Windows och till exempel Linux. Det är klart att det helt enkelt är omöjligt att ha så många webbläsare.
Specialtjänster kommer till undsättning som tar skärmdumpar av webbplatsen i olika versioner av webbplatsen.
Blockera. Normalisering av stilarFörutom utsläpp finns det s.k normalisering- det här är när egenskapsvärden (till exempel marginal och utfyllnad) inte återställs till noll, men vissa praktiska värden specificeras (så att standardutfyllningen är densamma och bekväm i alla webbläsare).
Börja lösa problem med hjälp av följande länk: problem för lektionen.
När du bestämmer dig för allt, gå vidare till att studera ett nytt ämne.
