Cross-browser layout under moderna förhållanden är en gemensam förståelse av den nödvändiga principen. Tänk alltid på en korsplattform

God dag, kära gäster på min träningsblogg och trogna prenumeranter. I den aktuella publikationen vill jag berätta för dig vad som innebär inställning av webbläsare av sig själv.

Det är därför jag kommer att ge en definition av detta begrepp och beskriva i detalj vad det är, förklara varför det finns problem med olika visningar av samma webbplats på html och css i och ge några användbara tips. Låt oss börja debriefingen!

Korsbläddra, visa ditt ansikte!

Alla ni känner till det engelska namnet på termen "cross browser": cross-browser. I bokstavlig översättning betyder detta: "Fungerar i alla webbläsare." Så i huvudsak namngavs huvudmålet för kompatibilitet mellan webbläsare: att främja identisk visning i alla befintliga webbläsare.

Det betyder att oavsett vilken programvara du använder för att visa tjänsten, bör dess stillayout inte ändras.

Varför är alla så problematiska?

Inom IT-området kan denna filosofiska fråga besvaras. Och han är faktiskt väldigt enkel. Numera utvecklas teknologier i en hastig hastighet, och därför får webbläsare varje år förlängningar, uppdateringar, stöd för nya funktioner på webbspråk och föråldrade funktioner och metoder utesluts därför.

Allt detta bidrar till att olika webbläsare arbetar annorlunda med vissa mjukvarulösningar, kanske inte visar dem korrekt eller kanske inte stöder att arbeta med dem alls.

Av detta framgår att nya versioner av webbläsare stöder många nyligen släppta optimeringar av språk och bibliotek, medan tidigare inte förstår vad utvecklaren vill att de alls ska göra.

Det andra problemet med felaktig visning av objekt på webbtjänstssidor kan vara webbläsars standardvärden. Så för varje produkt, vare sig det är Safari eller andra, för de flesta egenskaper och attribut är vissa standardvärden inställda. Som ett exempel kan vi nämna olika indrag från kanten på skärmen för karossetiketten.

Och det tredje problemet kan på något sätt hänföras till försummelsen av utvecklarna själva. Vad menar jag med det? Bara bristande efterlevnad av standardiserade regler som upprättades av en specialorganisation W3C (den officiella webbplatsen finns på https://www.w3.org).

Detta konsortium utvecklar vanliga standarder inom webbutveckling, på grund av vilken kompatibilitet mellan olika mjukvaruprodukter uppnås.

Recept för att lösa problem med bildskärmsidentitet

Efter att ha blivit bekant med de viktigaste "snubblorna" på vägen till kompatibilitet mellan webbläsare, ställde du förmodligen dig själv frågan: "Men hur gör man då en webbplats som fungerar i alla webbläsare på samma sätt?" För att besvara den här frågan bestämde jag mig för att lista de grundläggande lösningarna och användbara tips i ordning.

Det finns faktiskt mycket mer att skriva om detta ämne. Men jag tycker att användbara recept bör stoppas, eftersom jag berättade om viktiga punkter.

Observera att det inte är möjligt att lära sig inställningar över webbläsare på en gång. Det är värt att öva och pröva nya lösningar medan du genomför nya projekt. Därför fördjupa din kunskap genom böcker, se kurser relaterade till denna typ av layout och grunderna i användbarhet, läs användbara artiklar.

Med vänlig hälsning Roman Chueshov

Läsa: 106 gånger

Hej kära läsare av bloggsidan. Vår dagens uppgift är att skapa den så kallade webbplatslayouten inte med hjälp av (igår layout) utan med div Elements. De där. vi måste bygga den övre delen (cap), den nedre delen (sidfoten) på divorna och tre kolumner till exempel.

Förresten, vi löste redan detta problem när jag skrev om.

Det verkar som om det inte är värt att upprepa, men jag tänker inte göra det. Idag kommer att beskrivas grundläggande annorlunda metod för webbplatslayoutoch överväga också syftet med direktiv @import och @media  (framifrån) på CSS-språket som vi redan har studerat (naturligtvis på en grundnivå).

Layout av webbplatsen på block - behöver du den?

Dessutom har vi redan lyckats analysera Html-språket med ben och förlita oss på den ursprungliga källan i konsortiets person. Jag tror emellertid att inte alla var genomträngda av min uppmaningar och omedelbart skyndade mig att studera också.

Och jag förstår till och med delvis dig. Faktum är att kunskap om dessa saker inte ger dig berömmelse eller rikedom, utan bara tar bort mycket tid som kan ägnas åt en mycket trevligare uppgift. Förmågan att använda bestick garanterar inte heller tillgången på utsökt mat på ditt bord. Men vid rätt tillfälle kan detta komma till nytta och spela en viktig roll.

Själv bestämde jag mig för ungefär tio eller tolv år sedan att lära mig Html till varje pris, men jag slutade helt från början, enligt min mening, snabbt och snabbt svalnat till detta företag, och föredrog att håna på en tråkig hjärna ett spännande spel i en annan skytt.

Ja, ja, en gång var spelen min hobby, men nu har sajten blivit den här hobbyen, och jag har möjlighet att utöva några av de som jag beskrev en gång. Dessutom, analogt med spel, uppfattas hur mycket pengar jag tjänar fortfarande som någon form av virtuella poäng som visar hur framgångsrikt jag går framåt.

Ser ut som att det här redan är outbrott, även om min make under de senaste åren radikalt har förändrat sin inställning till min nästa hobby (det är synd att hon kommer att kontrollera den här artikeln för grammatiska fel, annars skulle jag beskriva alla förändringar som ägde rum mer detalj), eftersom den här bloggen I motsats till alla dess ursprungliga förväntningar och tvivel, ger det ett verkligt avgas i form av raslande anteckningar (läs om hur man lagligt materialiserar digitala skyltar på skärmen till digitala skyltar för en enskild företagares konto.

I allmänhet var denna lyriska försämring inte av misstag, eftersom jag vill säga att HTML och CSS är små tegelstenar för att bygga ditt internetföretag, men att äga och förstå principerna för webbplatslayout kommer att ge en viss mängd poäng framför de som försummade denna kunskap.

Den totala framgången för ett webbprojekt beror ofta på sådana bagatell, vars utredning är lätt (och ofta mycket trevlig) kan skjuts in i det avlägsna hörnet. Jag kan bara inte komma ihåg en sak - vad gjorde det möjligt för mig att korsa den osynliga barriären som är vävd av lata och tristhet att tänka. Det är möjligt att korten bara gick ner. Därför önskar jag att du också ska övervinna denna barriär, men jag kan inte säga exakt hur du gör detta.

Okej, låt oss fortsätta med de som inte har bytt. Hur bygger jag en webbplatslayout med div-element och stilregler? Låt oss titta. Naturligtvis kommer vi att simulera arbetet med denna layout på den lokala datorn och helt enkelt dumpa alla filer vi behöver i en av dess mappar. Ingen värd och. För att förstå principerna kommer detta att vara överflödigt.

Så vi fortsätter till layouten. Skapa och ring upp en mapp för att lagra filerna i vårt framtida webbprojekt och skapa sedan en textfil i den med tillägget .html och namnindex. Vi skapar också en annan mapp i den här mappen, som vi kallar CSS (våra externa stilfiler lever i den).

Det kommer att vara möjligt att lägga till en annan mapp där vi kastar bilder som används i webbplatsens layout, som kommer att vara en del av den (bakgrundsbilder). Förråd att optimera, eller med andra ord maximalt.

Tja, kopiera nu "fisken" nedan till din index.html. Det är ganska bekvämt att använda den för att arbeta med kod, även om du har färdigheten att arbeta kan Dreamview visa sig vara en mer funktionell lösning:

I början bör det, som alltid, gå, vars syfte beskrivs i detalj i artikeln som hänvisas till. Inuti metataggen indikerar vi att den ska tolkas korrekt av webbläsaren när vi öppnar vårt projekt i den. Varje dokument måste ha ett ifylldt dokument (sidtitel), så vi har lagt till det i "fisken".

Det är uppenbart att webbplatsen per definition är sådan på grund av det faktum att alla dokument som utgör den tillhör samma domännamn, men huvudargumentet för besökare kommer att vara en liknande utformning av dess webbsidor, och det är vad vi kommer att behöva ta hänsyn till i layouten.

Därför måste vi ha en extern fil med stilar som kommer att tillämpas på absolut alla sidor. Men förutom detta kan det också finnas ytterligare CSS-filer som tillåter till exempel att olika delar av ett webbprojekt ser lite annorlunda ut.

Följaktligen orsakar inte översvämning av vänster eller höger kolumn en proportionell ökning av block med ID vnutr och vnesh (flytande element påverkar inte höjden på deras föräldrar eller med andra ord behållare), vilket innebär att innehållet kommer att krypa ut ur dem, träffa sidfoten och i allmänhet går längre än layout. Problem.

Men vi har det fjärde blockelementet med ID podporka, som inte innehåller något innehåll (och därför inte kommer att synas på webbsidan) och som är utformat specifikt för att eliminera denna incident. I koden obdhiy.css kommer vi att skriva en enkel regel för den här väljaren. Som ett resultat kommer blocket med ID podporka att förvärva en egenskap som är användbar för oss - det kommer att ta hänsyn till alla element som flyter framför den (vilket betyder att det ligger ovan i koden).

TILL. när innehållet ökar i höger eller vänster kolumn, kommer en proportionell nedåtgående förskjutning av elementet med podporka-ID att inträffa, och sedan Eftersom den här taggen inte längre flyter kommer blocken med ID vnutr och vnesh att ta hänsyn till den och öka deras vertikala storlek proportionellt:

Nu verkar allt fungera korrekt. Men vår webbplatslayout är ännu inte komplett. Anta att vi gjorde i index.html på detta sätt layouten på startsidan, men för en del andra avsnitt layouten bör vara annorlunda  (till exempel bör det inte finnas tre utan bara två kolumner). Hur kommer man ur denna situation?

Det är uppenbart att för detta ändamål måste du använda en annan fil än index.html. För att göra detta kan innehållet i index.html kopieras till en ny fil, till exempel razdel.html, eftersom Att redigera befintlig kod kommer att vara enklare än att skriva om den.

Tja, filen med kaskaderande stilark måste vi använda en ny, till exempel razdel.css. Det är i dem vi kommer att göra förändringar, men samtidigt kommer vi att titta närmare på hur exakt använd @import-direktivet  i sådana fall.

Låt oss börja med razdel.html:

...

Vi ändrade titeln på titelsidan och ändrade namnet på plugin-formatmallen till razdel.css. I det här fallet kommer det naturligtvis att vara nödvändigt att skapa just denna stillayoutfil i CSS-mappen. Jag vågar påminna er om att för index.html anslöt vi stilmarkering genom osnovnoy.css, i vilket ett enda @import-direktiv skrivdes för att ladda reglerna från obdhiy.css-filen:

  @import url (obdhiy.css);

Vi kommer inte att vara original i vår smart verst och i början av en ny (fortfarande tom) stilfil kommer vi att skriva exakt samma direktiv. Således får vi igen en tre-kolumn layout, men lägger till några regler bara lite senare, kan vi enkelt förvandla den till en två-kolumn en. Inte ens det. Vi skapar en annan fil i CSS-mappen med namnet dvekolonki.css och följande innehåll:

  #rätt (display: ingen;) #center (marginal-höger: 0;) #vnesh (bakgrundsbild: ingen;)

Vad har vi gjort? Vi har förbjudit att visa den högra kolumnen på webbsidor med. Vi tog också bort den yttre marginalen till höger för mittkolumnen, eftersom det inte längre är nödvändigt. Tja, till slut förbjöd vi att visa bakgrundsbilden i samma högra kolumn. I allmänhet förintade vi denna högra kolumn fullständigt i vår sektionslayout.

Nåväl, för att slutföra layouten för två-kolonnens layout återstår det bara att ansluta denna mycket dvekolonki.css i filen razdel.css, vars slutliga innehåll nu kommer att se ut så här:

  @import url (obdhiy.css); @import url (dvekolonki.css);

Alla regler i koden nedan (från dvekolonki.css) kommer att ha högre prioritet, vilket innebär att vi kommer att följa deras åtgärder på webbsidan. Som ett resultat, när du öppnar razdel.html, kan du redan se den två-kolumnversionen av layouten:

Egentligen var vår ytterligare uppgift att överväga alternativ använder @import-direktivet i modern webbplatslayoutsom jag tror att vi har behandlat.

Nu återstår det att demonstrera funktionen av @media-direktivet, som jag antydde i början av artikeln. Det har en mycket indirekt relation till layout, men ändå skulle det troligtvis vara närsynt att inte säga om det.

Layout för utskrift med @media-direktivet

@Media-direktivet kan vara användbart inte för dig utan för dina läsare som vill skriva ut en webbsida utan grafiska krusiduller och onödig information. I detta fall behöver användare bara innehållet, som finns i den centrala kolumnen. Han behöver inte en hatt, sidfot, vänster och höger kolumn - bara artikeln.

När du förhandsgranskar utskriften i någon av de moderna webbläsarna kan du naturligtvis inaktivera bakgrundsutskrift, dvs. färgdesign, men webbläsaren kommer inte alltid att kunna separera korn (innehåll) från skaftet (navigering) på egen hand, så vi måste hjälpa honom i detta för att inte lita på chansen.

Dessutom, när du skriver ut, är det viktigaste som gör Internet så populärt förlusten av möjligheten att klicka på hyperlänkar till andra sidor. På papper, allt ditt hyperlänkar blir helt informativaom detta inte tas om hand i förväg. Låt oss lägga till hyperlänkar till vår tre-kolumnlayout och se hur det hela kommer att se ut när du försöker skriva ut en webbsida.

Således kommer den användare som skriver ut en sådan webbsida aldrig att veta vilken blogg som fortfarande är bäst. Så låt oss bli upptagen nyanser av layout för utskrift, och det redan nämnda @media-direktivet kommer att hjälpa oss med detta.

Det finns två alternativ för att använda media för att ange vilken enhet som ska användas dessa stilar för. Du kan ange mediaattributet i länktaggen, som ansluter externa stilfiler. Men i detta fall kommer webbläsaren att göra en extra förfrågan till servern, vilket inte är bra. Men denna metod har rätten till liv och denna skam kommer att se ut så här:

Mediaattribut  andra värden kan användas:

1. allt - används som standard och innebär att den här stilfilen måste användas för absolut alla utgångsenheter
2. punktskrift - fingerläsare (för blinda eller synskadade)
3. handhållen - handdatorer, smartphones och andra bagateller
4. tryck - skrivare
5. skärm - skärmar på användarmonitorer som de kommer att visa din webbplats på
6. tal - tal webbläsare
7. projektion - projektorer
8. tty - teletyper och annat skräp där det är omöjligt att använda dimensionen i pixlar
9. tv - goda gamla tv

I exemplet precis ovan, med Media-attributet, kopplade vi ett separat stilark till webbdokumentet för visning på monitorn och ett separat för utskrift (print.css). Det här är exakt vad vi behöver för att implementera layouter i den här tutorialen, men det skulle vara bättre att göra det på något annorlunda sätt med @media-direktivet som anges i formatmallen.

Om du märkte att vi med denna layoutmetod, som vi har valt (med @import), har ett gemensamt formatmall som alltid är ansluten via detta mycket direktiv - obdhiy.css. Det ligger i det att vi börjar trylla.

@media har sin egen syntax:

  @media-skärm, tv (en uppsättning väljare och regler som bara kommer att köras om webbsidan visas på ovanstående enhetens kommaseparerade lista)

I vår fil obdhiy.css kommer vi inte att sluta alla befintliga regler i skärmdirektivet @media, det räcker i slutet att helt enkelt lägga till nödvändiga CSS-regler för att skriva ut ett dokument med @media print:

  @media print (* (färg: # 000! viktigt; bakgrund: transparent! viktigt;) html (typsnitt: 10pt serif;) #fot, #header, # vänster, # höger (display: ingen;) #center (marginal: 0;) a: efter (innehåll: "(" attr (href) ")";))

Om du kommer ihåg betyder * -väljaren att använda alla dessa stilregler på absolut alla delar av Html-koden. Det är riktigt att en sådan väljare har den minsta möjliga prioriteten, därför ställer vi in \u200b\u200bfärgen för alla element till svart, och bakgrunden transparent, med reglerna färg och bakgrund, tvingas vi inte att ta frågor till beräkningen av prioriteringar med hjälp av inställningen.

För Html-väljaren har vi ställt in standardteckensnittet till eftersom skrivaren är mer förståelig. Tja, teckensnittet ställdes in av någon med serifs. Med hjälp av visning: ingen förbjöd vi visningen av karosseriet (mössor, sidfot och kolumner), och med hjälp av marginal: 0 tillät vi innehållet från mittkolumnen att ta upp all tillgänglig plats i bredden.

Sista väljaren a: efter en trickster, och för att bättre förstå vad han exakt talar om, rekommenderar jag att du går igenom följande publikationer om () och. Men vi behöver det för ett ganska enkelt syfte - se på papper exakt var hyperlänkarna leder.

Efter pseudo-elementet kan du generera innehåll under webbläsarens konstruktion av dokumentet. Efter tillåter oss att lägga till URL-adressen till hyperlänken omedelbart efter den plats där denna länk är anbringad. Detta görs med hjälp av den speciella CSS-innehållsregeln, som bara fungerar för två pseudo-element: efter och före.

Sid layout  - Detta är processen att kombinera HTML-kod och CSS-tabeller baserat på ett tidigare valt designbeslut. Det viktigaste tecknet på kvaliteten på det slutliga resultatet är korrekt visning av resursen både i alla populära webbläsare och på.

Det är ingen mening med att påminna om att ett framgångsrikt webbprojekt kännetecknas av stabil funktion och säkerställer ständig tillgång till dess innehåll. Detta kan endast uppnås om HTML-layouten är:

Cross-browser
- adaptiv;
   - innehålla den minsta mängden kod;
   - bidra till den höga hastigheten för laddning av webbsidor;
   - baseras på användningen av HTML-taggar enbart enligt deras syfte (systemets ordning och hierarki för att implementera element anses också vara ett integrerat krav);
   - giltig (överensstämmelse av webbplatsens kod med allmänt accepterade W3C tekniska standarder).

Visningar

Nu börjar vi överväga typerna av HTML-layout.

1. Statisk (fast) layout. Applikationens detaljer är olika genom att webbsidornas bredd kommer att vara identisk när du använder webbplatsen på både en mobil gadget och en stationär dator. I fallet när skärmens upplösning är stor och webbläsarfönstret expanderas till full skärm kan du på båda sidor observera en fri (icke-funktionell) plats. När det gäller bärbara enheter, med statisk layout ser användaren en bläddringsfält längst ner på sidan.

2. HTML-layout av gummi betyder att du fyller en sida med hela skärmen på enheten. Och det spelar ingen roll var du exakt ser innehållet. De ursprungliga parametrarna för sidan (till exempel storlek) påverkar inte heller något. Eftersom webbelement upptar allt ledigt utrymme är processen att utveckla en bekväm design mycket komplicerad.

3. Tabelllayout inkluderar skapandet av HTML-kod genom bildandet av en uppsättning tabeller. Det ser ut så här: först är huvudtabellen gjord, där det finns många celler. De innehåller följande paket med tabeller (vid behov). Och så vidare till oändligheten. Som ett resultat är koden ganska omfattande, dess efterföljande korrigering, ändring av webbmaster är svår.

Idag används HTML-tabelllayout sällan. Den största nackdelen är sökmotorernas långsamma indexering av webbplatsen. I princip är det möjligt att ordna flera tabeller på en sida, men vi rekommenderar inte att du använder dem som en del av att bygga strukturen för komponenterna i ett webbprojekt.

4. Layout med webbblock (eller div-layout). Det tros att detta är det vanligaste sättet att designa webbplatser idag. Rutnätet bildas av taggar