Jednoduché, ale efektívne tipy na rozloženie naprieč prehliadačmi, ktoré by mal poznať každý. Rozloženie medzi prehliadačmi v moderných podmienkach - všeobecné pochopenie potrebného princípu

Spomedzi všetkých existujúcich prehliadačov ako Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox a samozrejme prehliadač Amigo, ktorý má schopnosť samovoľnej inštalácie do počítačov, sa stačí pozrieť na odkaz. A ktorýkoľvek z prehliadačov má veľké množstvo verzií, ktoré vychádzajú jedna za druhou. Preto má každá nová verzia každého prehliadača svoje osobitosti. A aby stránka správne fungovala v každom z nich, musíte použiť rozloženie naprieč prehliadačmi.

A keď sa stránka pripravuje, musí sa otestovať vo všetkých prehliadačoch. V prípade, že sa tak nestane, po doručení stránky sa môžu objaviť nepríjemné chyby.

Najzábavnejším z prehliadačov je samozrejme Internet Explorer, hoci väčšina používateľov tento prehliadač stále používa. Takže ak bola stránka predtým skontrolovaná v prehliadači Chrome a potom sa otvorí v Prieskumníkovi, a, oh, hrôza. Bloky sú zmätené, tlačidlá menu prechádzajú cez seba, obrázky sa zobrazujú nesprávne, vo všeobecnosti úplný chaos.

Preto, aby sa používateľovi pohodlne pracovalo s vašou stránkou cez akýkoľvek prehliadač a nevidel takú hrôzu, je rozloženie medzi prehliadačmi povinné pre každú stránku. Na základe všetkého, čo bolo napísané vyššie, sme dospeli k záveru rozloženie html a css v rôznych prehliadačoch- Toto je rozloženie stránky zamerané na vytvorenie stránky, ktorá sa rovnako správne zobrazuje v každom prehliadači.

Vzhľadom na takú rozmanitosť prehliadačov, ako aj na potrebu, aby stránka bola univerzálna a aby sa správne zobrazovala vo všetkých prehliadačoch, zamestnávatelia vyžadujú, aby dizajnéri rozloženia vytvorili rozloženie pre rôzne prehliadače. Pochopenie príčin nesprávneho zobrazenia stránky, ako aj zručnosť rozloženia medzi prehliadačmi prichádza časom a v procese dlhodobej praxe. Iba pokusom a omylom môže človek zistiť, ktoré prehliadače a aké problémy má. Dizajnér rozloženia sa so skúsenosťami snaží poskladať kód tak, aby bol všetkými možnými spôsobmi prispôsobený pre každý z prehliadačov a v procese rozloženia už zostáva len opraviť drobné záseky.

Príčiny problémov so zobrazením stránok.

Teraz sa pozrime na to, prečo sa takéto problémy vyskytujú s vnímaním kódu v rôznych prehliadačoch.

1. Rozloženie sa nezhoduje niektoré štandardy HTML.
2. / i> Neustále aktualizované a objavujú sa nové CSS knižnice a pravidlá. Sú dokonale reprodukované aktualizovanými verziami prehliadačov, ale v starších verziách sa nemusia zobrazovať správne.
3. internet Explorer... Najpodivnejší prehliadač, ktorý nerozumie polovici všetkých pravidiel, a preto sa neustále vymýšľajú nové hacky, ako tieto problémy IE obísť.
4. Predvolená hodnota atribútu... Táto hodnota môže byť v každom prehliadači iná. Atribúty sú farby prvkov, fonty a ich veľkosť. Toto všetko musí byť popísané v šablóne štýlov, inak prehliadač predvolene nezávisle nastaví hodnoty špecifikované vo všetkých z nich. Preto sa v každom z nich bude stránka zobrazovať inak.

Aby ste sa naučili, ako tieto problémy obísť, najprv, ako ste už zistili, potrebujete prax a na uľahčenie počiatočnej fázy učenia sa rozloženia medzi prehliadačmi som pre vás pripravil niekoľko tipov.

Rada 1. Riešenie problému s atribútmi je jednoduché, aj keď môže byť trochu únavné. Ak to chcete urobiť, stačí zaregistrovať všetky atribúty v šablóne so štýlmi. Týmto spôsobom prehliadače nemusia vkladať hodnoty, ako chcú.

Tip 2. Nainštalujte si do svojho pracovného počítača všetky obľúbené prehliadače, ako aj všetky verzie programu Internet Explorer. Keďže nie je jednoduché nainštalovať niekoľko verzií na jeden počítač naraz bez veľkého tanca s tamburínou, môžete si nainštalovať Internet Explorer Tester. Tento program umožňuje skontrolovať stránku naraz na niekoľkých verziách prehliadača.

Tip 3. Vopred si vyberte možnosť rozloženia. Tu sú dve možnosti. Prvým je vytvoriť stránku, ktorá je úplne vhodná pre jeden prehliadač, a potom opraviť problémy v každom ďalšom prehliadači. Druhá možnosť je overiť každý kus kódu tak, ako je napísaný vo všetkých prehliadačoch. Výberom prvej možnosti sa môžete vyhnúť zbytočným problémom úplným prepísaním kódu. Ale výber je vždy na vás.

Tip 4. Použite doplnky na rýchlejšie nájdenie chýb v kóde pre každý prehliadač. Ako príklad môžete otestovať tieto doplnky:

1. Pre Chrome na getfirebug.com
2. Pre Operu na oficiálnej stránke Opery
3. Pre Mozila na doplnkoch mozila
4. Pre IE v kancelárii. webové stránky spoločnosti Microsoft

Urobme záver zo všetkého vyššie uvedeného. Rozloženie naprieč prehliadačmi- nie je to strašidelné a niekedy je to zábavné. V modernom svete je veľmi dôležitá, aby sa stala úspešnou dizajnérkou rozloženia. Hlavná vec na zvládnutie tohto rozloženia je skúsenosť, skvelá skúsenosť. Preto budete musieť veľa cvičiť. Počas nácviku používajte rôzne stratégie, vyskúšajte rôzne metódy a nástroje (napríklad vo svojej práci používajte hotové rámcové nástroje, ktoré môžu urýchliť vývoj webových stránok a ľahko vytvárať responzívne rozloženia webových stránok). Po určitom čase budete môcť nájsť svoju vlastnú stratégiu, ako vytvoriť rozloženie pre viaceré prehliadače, a napísať stránku, ktorá sa bude správne zobrazovať v každom z populárnych prehliadačov.

Naučte sa rozloženie naprieč prehliadačmi a ďakujeme vám za pozornosť.

Všimli ste si niekedy, že webová stránka sa môže v rôznych prehliadačoch zobrazovať inak? Toto je bod rozloženia naprieč prehliadačmi.

Čo je rozloženie naprieč prehliadačmi

Rozloženie naprieč prehliadačmi- prístup k vývoju html kódu (layout), ktorý zabezpečuje správne zobrazenie vo všetkých existujúcich prehliadačoch

Navyše správnosť je presne presné umiestnenie všetkých detailov rozloženia a funkčnosti. Stránka by mala vyzerať rovnako vo všetkých populárnych prehliadačoch:

• Firefox
• Chrome
• Opera
• Opera mini
• Safari
• internet Explorer

Úloha je pomerne náročná, ak používate „špecifické“ funkcie CSS, pretože všetky prehliadače vykresľujú niektoré prvky webových stránok vlastným spôsobom. A každá nová verzia obsahuje nové funkcie, ktoré sa implementujú do prehliadačov od iných vývojárov zďaleka nie v ten istý deň.

Rozloženie medzi prehliadačmi je dobre známe tým, ktorí pracovali s Internet Explorerom 6 – svojou jedinečnosťou pokazil veľa nervov dizajnérom rozloženia. A táto jedinečnosť bola vyjadrená v tom, že tento prehliadač nepodporuje príliš veľa pravidiel a štandardov. Vo výsledku sa ukázalo, že rozloženie vyzeralo skvele vo Firefoxe a Opere a v IE6 sa rozpadlo na absolútny chaos.

Dôvody porušenia správneho zobrazovania stránok

Napriek tomu, že vo svete existujú určité štandardy pre tvorbu webových stránok, vývojári neustále zavádzajú podporu nových technológií a nových pravidiel CSS v prehliadačoch. To vám umožňuje vytvárať dynamickejšie a funkčnejšie stránky a realizovať predtým nedosiahnuteľné príležitosti. A každý vývojár sa snaží zabezpečiť, aby jeho prehliadač podporoval najnovšie technológie, nové skripty a nové knižnice. Výsledkom je, že niektorí používatelia sú spokojní s novým prehliadačom, ktorý dobre zobrazuje najpokročilejšie stránky, zatiaľ čo iní nedokážu pochopiť, prečo sa otvorená stránka neotvorí správne. Preto musí dizajnér rozloženia napísať kód, ktorý by sa v rôznych prehliadačoch zobrazil rovnakým spôsobom.

Netreba zabúdať ani na to, že sa neustále objavujú nové verzie prehliadačov a bolo by veľmi dobré, aby stránka korektne fungovala aj na nových verziách.

Čo potrebujete pre rozloženie medzi prehliadačmi - nástroje

Rozloženie naprieč prehliadačmi by malo poskytovať čo najsprávnejšie zobrazenie stránky v akomkoľvek modernom a zastaranom prehliadači. Na to musí dizajnér rozloženia vytvoriť kód vhodný pre väčšinu používaných prehliadačov, vrátane tých málo známych. Bude potrebovať určité vedomosti a zručnosti, ktoré nadobudol v procese štúdia svojho podnikania.

Neoceniteľnú pomoc poskytujú porovnávacie tabuľky zobrazujúce rozdiely vo vnímaní jednotlivých prvkov rôznymi prehliadačmi. To znamená, že na vykonanie rozloženia naprieč prehliadačmi potrebujeme:

• Všeobecné znalosti o usporiadaní;
• Znalosti v oblasti funkcií rozloženia pre určité prehliadače;
• Niekoľko prehliadačov na jednom počítači;
• Kontrola v službe browsershots.org

Mimochodom, bolo by pekné vytvoriť si na počítači virtuálny stroj, nainštalovať naň operačný systém a nahrať tam staré verzie prehliadačov - mnohí stále používajú starý softvér, ktorý nerozumie moderným technológiám.

So zákazníkom je potrebné vykonať samostatný rozsah prác. Musí vysvetliť, že vo svete webdizajnu nie je nič dokonalé a že niektoré body bude musieť obetovať. Úlohou tímu dizajnérov a programátorov je vytvoriť webovú stránku, ktorá musí spĺňať nasledovné body:

• Maximálny súlad s pôvodným usporiadaním a želaniami zákazníka;
• Maximálne správne zobrazenie vo všetkých populárnych prehliadačoch;

V procese vytvárania rozloženia medzi prehliadačmi v kóde je štandardne nastavená hodnota atribútov prvkov HTML, čo vám už v počiatočnej fáze umožňuje zbaviť sa nesprávneho zobrazenia aj tých najjednoduchších rozložení budúcich stránok. . Ďalej sú značky umiestnené s prihliadnutím na kompatibilitu kódu v rôznych prehliadačoch. V tejto fáze bude musieť dizajnér rozloženia neustále monitorovať správnosť zobrazenia stránky pomocou prehliadačov všetkých verzií a generácií (v každom prípade je potrebná aspoň základná sada populárnych prehliadačov posledných rokov).

Aby ste si uľahčili prácu pri vytváraní rozloženia pre viacero prehliadačov, mali by ste najskôr vytvoriť rozloženie pre jeden prehliadač, pričom by ste mali kontrolovať súlad s pôvodnou šablónou v PSD. Potom sa kontroluje správnosť zobrazenia v iných prehliadačoch so súčasnou modernizáciou zdrojového kódu. Tento prístup výrazne urýchľuje vytváranie rozloženia medzi prehliadačmi a umožňuje vám získať slušné výsledky v krátkom čase.

Záver

Rozloženie naprieč prehliadačmi je základným kameňom moderného webového dizajnu. Rozdiely v správaní prehliadača sú často prekážkou pri implementácii určitých funkcií. Výsledkom je, že sme spokojní s priemerným, no dovedeným výsledkom k dokonalosti. A dnes bolo rozloženie medzi prehliadačmi doplnené o potrebu vytvoriť adaptívny dizajn, ktorý sa bude správne zobrazovať nielen v akomkoľvek prehliadači, ale aj na akomkoľvek mobilnom zariadení.

Dnes existuje niekoľko najpopulárnejších prehliadačov, ktoré ľudia používajú na prehliadanie internetu. A neustále bolesti hlavy pre každého webového dizajnéra je, že rovnaký kód HTML vyzerá v rôznych prehliadačoch odlišne. Navyše ten istý kód vyzerá odlišne v rôznych verziách toho istého prehliadača.

Prirodzene, každý správca webu by sa mal postarať o to, aby stránka vyzerala rovnako v čo najväčšom počte prehliadačov. Práve táto zručnosť (keď kód vyzerá rovnako v rôznych prehliadačoch) sa nazýva „rozloženie HTML medzi prehliadačmi“. Možnosť vysádzať takýto kód je veľmi užitočná a ocenia ju potenciálni zamestnávatelia. Takáto požiadavka je veľmi často jednou z prvých v podmienkach, ktoré musí potenciálny kandidát na voľné miesto programátora webu v serióznej spoločnosti splniť.
Prečo stránka vyzerá v rôznych prehliadačoch inak?

Existuje niekoľko dôvodov, prečo sa v rôznych prehliadačoch objavuje odlišný druh stránok.

1. Používanie neštandardných funkcií HTML.

Návrhár môže použiť funkcie, ktoré nie sú súčasťou štandardu HTML. Prehliadače môžu skutočne podporovať mnoho rôznych atribútov značiek, ktoré nie sú zdokumentované v štandarde. Neodporúča sa používať tieto funkcie. Z jednoduchého dôvodu – ak niečo nie je popísané v štandarde, niektorý z prehliadačov to nemusí podporovať. A tvorcovia takéhoto prehliadača by mali úplnú pravdu. Nie je potrebné používať neštandardné funkcie.

Vždy skontrolujte kód, ktorý napíšete, v porovnaní so štandardom.

Uvediem klasický príklad. Zvážte nasledujúci HTML kód pre jednoduchú tabuľku.

Ahoj svet

Tento kód zobrazí tabuľku pozostávajúcu z jednej bunky. Webdizajnér chce, aby prvý riadok tejto tabuľky mal výšku 100 pixelov. V štandarde HTML však značka atribút výška je neplatný.

V tomto prípade chyba nie je veľká, pretože atribút výška značky rozumie väčšina moderných prehliadačov. (Tento atribút nepozná iba InternetExplorer 4). Ale v iných prípadoch môže zanedbanie normy viesť k žalostnejším výsledkom. Každý z nás už určite bol na stránkach, na ktorých sa akýkoľvek prvok pohyboval buď do strany, alebo nadol. Každý z nás si s najväčšou pravdepodobnosťou v srdci myslel, že stránku nerobil profesionál. Aj keď s najväčšou pravdepodobnosťou stránka jednoducho nebola testovaná na hlavných typoch prehliadačov. Stránky sa spravidla vytvárajú a testujú iba v programe Internet Explorer, pretože ide o najobľúbenejší prehliadač medzi používateľmi. Preto buďme nabudúce blahosklonní, vediac, prečo dochádza k strate vzhľadu.

Správnym riešením pre tabuľkový príklad je použitie štýlov. Takto môže vyzerať „správny“ kód:

Ahoj svet

Táto možnosť sa bude (alebo by aspoň mala) zobrazovať rovnako vo všetkých typoch prehliadačov.

2. Štandardne priraďte hodnoty atribútov.

Každý prvok HTML má veľa atribútov. To zahŕňa farbu, vzdialenosť od susedných prvkov, zarovnanie a oveľa viac. Pri vytváraní HTML kódu dizajnér zvyčajne nastavuje hodnoty iba tých atribútov, ktoré sú dôležité pre prezentáciu prvkov na stránke. Čo by mal prehliadač urobiť s hodnotami nešpecifikovaných atribútov? V tomto prípade prehliadače používajú predvolené hodnoty. A práve tu sa skrýva nebezpečenstvo. Predvolené hodnoty sa môžu v jednotlivých prehliadačoch líšiť. Napríklad predvolená veľkosť písma sa môže líšiť. Z tohto dôvodu niektoré prehliadače zaberajú viac miesta na text ako iné. Čo zase môže viesť k rozdielom v zobrazení stránky.

Ako sa dá tento problém vyriešiť? Najprv univerzálny tip: skontrolujte si zobrazenie stránky v čo najväčšom počte prehliadačov. Po druhé, môžete nastaviť svoje vlastné predvolené hodnoty pre všetky prvky, ktoré sa používajú na stránke v súbore css. Prehliadač tak nemusí „vymýšľať“ hodnoty vlastností prvkov HTML. Dá sa to urobiť napríklad takto:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, citovať, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
malý, úder, silný, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
sada polí, formulár, štítok, legenda,
table, caption, tbody, tfoot, thead, tr, th, td (
okraj: 0;
výplň: 0;
ohraničenie: 0;
obrys: 0;
váha písma: zdediť;
štýl písma: zdediť;
veľkosť písma: 14px;
font-family: zdediť;
vertikálne zarovnať: hore;
pozadie: priehľadné;
písmo: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
farba pozadia: biela;
}

Všetky prvky na stránke teda budú mať vlastnosti špecifikované v tomto súbore. Ak je potrebné, aby sa vlastnosti akéhokoľvek prvku líšili od predvolených vlastností, musia sa explicitne predefinovať.

3. "Funkcie" niektorých prehliadačov.

Aj keď správca webu používa iba štandardné funkcie HTML, má nastavené vlastné predvolené atribúty pre všetky prvky, stránka môže v rôznych prehliadačoch vyzerať inak. Dôvodom je, že samotné prehliadače nemusia spĺňať štandard HTML. Prehliadače, ako každý softvér, môžu obsahovať chyby. Tieto chyby sú zvyčajne rýchlo opravené, ale vždy existuje možnosť, že používateľ nemá najnovšiu verziu prehliadača.
Je tiež možné, že výrobcovia prehliadačov (najmä MicroSoft hrešiaci týmto) veria, že vedia lepšie zobraziť ten či onen prvok.

Keďže Internet Explorer je hlavným vinníkom problémov s nekompatibilitou štandardov, bolo navrhnutých mnoho možných riešení, aby stránka vyzerala v IE rovnako ako v iných prehliadačoch.

Najbežnejším spôsobom sú podmienené komentáre pre IE. Microsoft, ako keby vedel o problémoch svojho prehliadača, dal vývojárom spôsob, ako spustiť HTML kód iba na špeciálnej verzii IE. Napríklad nasledujúci kód bude obsahovať vlastný súbor CSS pre IE 7 a vyššie: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Podmienené komentáre majú jednu jedinú nevýhodu. Stránka, ktorá obsahuje takéto komentáre, nie je platnou stránkou HTML. Ako vidíte, aj tu Microsoft porušuje štandard.

Je schopnosť webového zdroja zobrazovať to isté a fungovať vo všetkých populárnych, bez prerušenia fungovania a chýb v rozložení, ako aj s rovnakou správnou čitateľnosťou obsahu. Vzhľadom na rýchly vývoj technológií sa odporúča, aby sa stránka používala ako cross-browser iba vo vzťahu k najnovším verziám prehliadačov.

Tento výraz bol prvýkrát použitý v 90. rokoch, keď bola rivalita prehliadačov na vrchole. V tých časoch sa predpokladalo, že zdroje naprieč prehliadačmi fungujú rovnako v Netscape Navigarot (prehliadač zanikol v roku 2007) aj v Internet Exploreri. Postupom času začali tvorcovia aplikácií implementovať funkcie špecifické len pre jeden z prehliadačov. Vďaka tomu sa od seba začali líšiť v spôsobe zobrazovania stránok a ich fungovania.

Každý moderný prehliadač používa na spracovanie zdrojového kódu a kódu svoje vlastné algoritmy. V tomto ohľade sa vývojári zdrojov stretávajú s problémami s kompatibilitou stránok s konkrétnym prehliadačom. Na vytvorenie projektového krížového prehliadača potrebujete iba štandardné nástroje CSS. Vyžaduje si to aj špeciálne selektory CSS špecifické pre prehliadač (hacky), takže ich bude potrebné napísať pre každú aplikáciu samostatne.

Existuje mnoho účinných metód, pomocou ktorých dosiahnete správne zobrazenie stránok aj na starších verziách prehliadačov. Je však rozumné uchýliť sa k takýmto postupom, iba ak ste si istí, že väčšina návštevníkov sedí na vašej stránke práve z nich.

V posledných rokoch sa SEO stretávajú s menším počtom problémov s rôznymi prehliadačmi, pretože vývojári softvéru už nepodporujú staršie verzie svojich prehliadačov. Napríklad Microsoft už otvorene deklaruje potrebu používať aktualizovaný Internet Explorer a nabáda k opusteniu zastaraných verzií produktu.

Na poznámku. V súčasnosti mnohí tvorcovia stránok inštalujú špeciálnu stránku známu ako „stub“, ktorá sa zobrazuje na obrazovke používateľov prehliadačov, ktoré stránka nepodporuje. Takáto stránka navrhuje nahradiť ich novými verziami alebo populárnymi prehliadačmi, aby sa obsah zobrazoval správne.

Stojí za zmienku, že prvky webového zdroja nemusia byť úplne identické vo všetkých prehliadačoch, ktoré existujú iba dnes. Miesto možno považovať za vhodné, ak:

• informácie na stránke sú čitateľné;
• štruktúra je zachovaná;
• žiadne chyby v rozložení;
• text nie je „prekrytý“ nad iným textom a obrázkami, pokiaľ to neposkytuje autor obsahu.

Pri testovaní webového zdroja na kompatibilitu medzi prehliadačmi je potrebné použiť najnovšie verzie najpopulárnejších prehliadačov:

1. Google Chrome.
2. Mozilla Firefox.
3. Opera.
4. Internet Explorer.
5. Netscape.
6. Safari.

Vzhľadom na to, že v poslednom čase výrazne vzrástlo percento mobilnej návštevnosti a Google to zaviedol, webmasteri sa čoraz viac venujú zabezpečovaniu kompatibility stránok s tabletmi a smartfónmi. Displeje týchto zariadení sú oveľa menšie ako na monitoroch osobných počítačov, preto je potrebné ich prispôsobiť mobilným zariadeniam.

Ako vytvoriť webový cross-browser?

Existuje niekoľko pracovných metód, ktoré môžete použiť na dosiahnutie kompatibility vášho webového zdroja medzi rôznymi prehliadačmi.

AplikáciaCSS hacky

CSS hacky sú útržky kódu, ktorým rozumie iba jeden prehliadač. Ak sa napríklad vaša stránka zobrazuje správne v troch prehliadačoch a v ostatných troch sú viditeľné niektoré „zárubne“, problém sa vyrieši oddeleným predpísaním vhodných hackov pre každý z troch prehliadačov, ktoré nesprávne interpretujú obsah stránky.

Na poznámku. Hacky nie sú najlepším spôsobom, ako opraviť chyby vo vašom kóde, pretože ho robia škaredým a nesprávnym. Naďalej však plní svoje funkcie.

Implementácia generických prvkov

Takéto prvky fungujú rovnako dobre vo väčšine prehliadačov, preto sa odporúča zamerať sa na ne. Použitím iba všeobecných prvkov bude zdrojový kód vašej stránky esteticky príjemný, krátky a jasný, pričom bude stále konzistentný so všetkými bežne používanými prehliadačmi.

Ktoré značky podporuje ktorá verzia enginu, si môžete overiť pomocou služby caniuse.com, ktorá je dostupná úplne zadarmo.

Predpony predajcu

Sú pozostatkom vojen prehliadačov, najmä WebKit. Táto metóda je efektívnejšia a čistejšia ako používanie hackov.

Každý prehliadač má jedinečné vlastnosti, ktoré majú predponu dodávateľa. V prípade prehliadača Google Chrome je prvok border-radius reprezentovaný vlastnosťou -webkit-border-radius. Mozilla Firefox pridáva predponu -moz-. Vlastnosti ako tieto menia iba funkčnosť prvku v konkrétnom prehliadači a žiadnym spôsobom neovplyvňujú iné prehliadače.

Služby kontroly viacerých prehliadačov

Ak vaša webová stránka nie je dostatočne prehliadačom pre rôzne prehliadače, potom bude pre väčšinu návštevníkov ťažké vnímať jej obsah rovnakým spôsobom, čo bude mať za následok zhoršenie faktorov správania, ktoré vyhľadávacie nástroje nevyhnutne berú do úvahy. výsledkov hodnotenia.

Preto je dôležité zistiť kompatibilitu vášho webového zdroja medzi prehliadačmi. Tento indikátor môžete otestovať pomocou obrovského množstva služieb dostupných online aj po inštalácii do zariadenia. Predstavujeme vám najpohodlnejšie platené a bezplatné služby.

#1. CrossBrowserTesting

Táto testovacia služba je platená a funguje online. Je podporovaný takmer všetkými verziami operačných systémov, prehliadačov a je vhodný pre väčšinu mobilných zariadení a rozlíšení obrazovky.

Súlad stránky s rôznymi prehliadačmi môžete skontrolovať nasledujúcimi spôsobmi:

• "Živý" test. So zdrojom môžete pracovať v prehliadači s predvolenými parametrami, nahrávať video a robiť snímky obrazovky.
• Selénový test. Znamená automatickú kontrolu v súlade s predtým vytvoreným skriptom. Je povolené zaznamenávať výsledky vo formáte video súboru.
• Režim automatického ukladania snímky obrazovky. Je možné kombinovať rôzne operačné systémy, prehliadače, zariadenia a veľkosti obrazoviek.
• Miestne pripojenie. Môžete skontrolovať dokumenty, ktoré ešte neboli nahrané na stránku.

Napriek tomu, že je služba spoplatnená, do 7 dní máte limit 60 minút na jej využitie, aby ste si pred predplatením plateného odberu vyhodnotili funkcie a možnosti aplikácie.

#2. Snímky prehliadača

Ďalšia online služba, kde si môžete uložiť snímky obrazovky stránky, ktorá je kontrolovaná na kompatibilitu medzi prehliadačmi, z mnohých prehliadačov a ich zostáv (viac ako 200 kusov), vrátane zastaraných a nepopulárnych.

K dispozícii sú bezplatné aj platené verzie. Zlá vec na bezplatnej je, že vaša žiadosť je zaradená do frontu a snímky obrazovky sa po uvoľnení stránok postupne nahrajú na server. Tento postup môže trvať od 10 minút do 2-3 hodín, čo je dosť dlho.

S plateným predplatným budú vaše požiadavky na testovanie v rôznych prehliadačoch uprednostnené. Môžete si tiež vybrať rozlíšenie obrazovky, JavaScript a Flash rôznych verzií, ako aj farebnú hĺbku.

č. 3. IE NetRenderer

To znamená bezplatnú online kontrolu. Služba sa líši v tom, že na stránke je možné skontrolovať súlad iba pre Internet Explorer, od verzie 5.5 po verziu 11. Tu môžete zadať iba verziu prehliadača a adresu testovaného zdroja.

č. 4. Tester IE

Ide o špeciálny prehliadač, v ktorom je možné kontrolovať rôzne verzie IE. Ide o lokálnu aplikáciu, ktorá je dostupná na použitie po inštalácii do počítača. Hlavnými funkciami aplikácie je napodobniť fungovanie vybranej verzie prehliadača a zarábať na sieti prehliadaním internetu.

č. 5. Browserling

Prostredníctvom tejto služby získate možnosť pracovať s kontrolovaným zdrojom nie v emulovanom, ale v skutočnom okne prehliadača, ktoré je nainštalované vo virtuálnom stroji programu. Kontrolu je možné vykonať pre 5 najpopulárnejších prehliadačov (Chrome, Opera, IE, Safari, Firefox), pre 5 verzií Windows a 4 verzie Anrdoidu. Môžete upraviť rozlíšenie obrazovky a urobiť snímky obrazovky. Všetky funkcie služby sú spoplatnené, len prvé 3 minúty testovania sú zdarma, s rozlíšením 1024x768 a Windows Vista.

č. 6. Lyžica Browser Sandbox

Ponúka kontrolu kompatibility stránok pre presné verzie prehliadačov Chrome, IE, Opera, Safari a Firefox. Najnovšie verzie prehliadačov sa testujú zadarmo, no ak chcete otestovať staršie verzie, budete musieť zaplatiť určitú sumu.

Po výbere prehliadača sa otvorí v novom okne a potom v paneli s adresou musíte zadať adresu URL stránky a potom ju otestovať. V nástroji je k dispozícii testovanie všetkých parametrov naprieč prehliadačmi. Na jeho použitie si však musíte stiahnuť špeciálny plugin.

č. 7. MultiBrowser

Platená kontrola medzi prehliadačmi. Funguje so všetkými aktuálne dostupnými verziami prehliadačov Firefox a Chrome, Safari 5.1, niekoľkými zostavami Explorer a emuláciami väčšiny smartfónov a tabletov so širokou škálou rozlíšení obrazovky.

Aplikácia môže používať prehliadače už nainštalované v počítači alebo si stiahnuť verzie, ktoré používateľ potrebuje. Obrovskou výhodou služby je funkcia, ktorá umožňuje testovať stránku v rôznych prehliadačoch offline, ak si ukladáte internetové súbory.

Vďaka rôznym režimom môžete:

• pracovať so zdrojom v požadovanom prehliadači;
• sledovať stránky na emulovaných smartfónoch a tabletoch, nahrávať video;
• automaticky ukladať snímky obrazovky z rôznych prehliadačov a zariadení podľa množstva veľkostí obrazovky.

Ak chcete začať, môžete si nainštalovať demo verziu programu, ktorá je k dispozícii na 2 týždne.

č. 8. Sauce Labs

Online testovacia služba medzi prehliadačmi. Skúšobná verzia je dosť obmedzená, ale keď si zakúpite platené predplatné, bude k dispozícii automatická kontrola. Nachádza sa tu asi 700 kombinácií prehliadačov, rozlíšení a zariadení.

č. 9. Browsera

Aplikácia na kontrolu viacerých prehliadačov je k dispozícii v platenej aj bezplatnej verzii. Funkcie druhého sú samozrejme výrazne obmedzené počtom naskenovaných stránok webu a dostupnými prehliadačmi.

č. 10. Lakmus

Online aplikácia, ktorú môžete využívať zadarmo len prvé 3 dni. Podporuje mnoho novších verzií populárnych prehliadačov a mobilných zariadení.

č. 11. Equafy

Toto je najefektívnejší program nielen na testovanie kompatibility webového zdroja online medzi prehliadačmi, ale aj na automatické skenovanie a vyhľadávanie chýb rozloženia v procese zobrazovania dokumentov v rôznych prehliadačoch.

Pred kontrolou, ktorú je možné uložiť vo formáte videa, môžete vykonať množstvo nastavení, ktoré nie sú dostupné v mnohých iných podobných službách. Jediným problémom je anglický jazyk, ale s pomocou prekladača nebude ťažké pochopiť funkčnosť.

Snímky obrazovky môžete zobraziť v zozname strán dokončeného prehľadu kliknutím na šípku Zobraziť v extrémnom stĺpci.

č. 12. Browserstack

Platená aplikácia, ktorej demo verziu si môžete vyskúšať počas prvých 30 minút. Testovanie stránky medzi prehliadačmi je možné vykonať so 7 modernými prehliadačmi rôznych verzií, množstvom emulovaných smartfónov a tabletov, ako aj so softvérom nainštalovaným v počítači.

Prehliadač, ktorý ste vybrali na testovanie prostriedku, sa zobrazí v okne prehliadača. Internet je v ňom plne prístupný, nechýba ani možnosť vytvárať screenshoty.

č. 13. Viewlike.us

Vynikajúca služba na kontrolu zobrazenia zdroja s rôznymi rozšíreniami. Toto je skvelá možnosť, ak chcete otestovať vzhľad a dojem zo svojej webovej stránky a zistiť, ako reaguje.

Okrem kontroly kompatibility medzi prehliadačmi zistíte aj rýchlosť sťahovania a použiteľnosť zdroja. Pomôže Viewlike.us zistiť veľkosť prvkov HTML kódu a obrázkov, ako aj počet statických zdrojov.

Ďalší nástroj vám umožňuje získať odporúčania týkajúce sa pravidiel použiteľnosti. Má napríklad stránka zle rozpoznateľnú veľkosť písma a či používa doplnky. Potom získate screenshoty stránok testovaného webového zdroja v rôznych rozlíšeniach.

č. 14. Ghostlab

Bezplatne platený multifunkčný testovací program. Skúšobná verzia je k dispozícii počas prvých 7 dní.

Všetky vyššie uvedené služby na kontrolu kompatibility webovej stránky medzi prehliadačmi sa do určitej miery navzájom líšia v určitých schopnostiach, ktoré sú im vlastné. Preto je najlepšie použiť na testovanie niekoľko aplikácií naraz, aby ste vykonali plnohodnotnú kontrolu zdroja a získali všetky potrebné údaje.

Záver

Kompatibilita medzi prehliadačmi má veľký vplyv na ukazovatele faktorov správania a v dôsledku toho aj na pozíciu stránky pri hodnotení vyhľadávacími nástrojmi. Počet návštevníkov a záujem používateľov o jeho obsah závisí od toho, ako dobre a koľko prehliadačov váš projekt podporuje.

Nemusíte byť skúseným odborníkom, aby ste pochopili, že po vstupe na stránku zo smartfónu ju človek pravdepodobne opustí, ak dizajn a štruktúra na jeho zariadení vyzerajú nečitateľne a neesteticky. Nezabudnite tiež, že vyhľadávače podporujú prispôsobené webové zdroje, ktorých dizajn je v súlade s pravidlami rozloženia, čím sa zvyšuje ich interné hodnotenie, a tým sa zlepšuje konverzia.

Alexander Ovsyannikov alias internetový major

Propagácii a zarábaní peňazí na stránkach sa venujem od roku 2009.

Téma v sebe zhromaždila tak známe metódy rozloženia v rôznych prehliadačoch, ako aj niekoľko zaujímavých, skôr zriedkavých.

Predslov. Prečo sa to stalo

Po tom, čo sa v roku 1994 objavil jeden z prvých úspešných prehliadačov, Netscape Navigator, založený na prvom prehliadači s grafickým shellom Mosaic, sa Microsoft rozhodol vytvoriť vlastný prehliadač a pomenovať ho Internet Explorer. Prvá a druhá verzia IE sa dodávali s balíkom Microsoft Plus!, aby dopĺňali možnosti systému Windows, ale neboli široko prijaté. Potom sa Microsoft rozhodol vyvinúť prehliadač radikálne odlišný od IE 1.0 a 2.0, na čo si spoločnosť najala programátorov zo spoločnosti Spyglass, ktorí vyvinuli nový prehliadač založený na Mosaicu. Takto sa objavil Internet Explorer 3.0 v roku 1996. Vývojári však do prehliadača zaviedli štandardne nekompatibilné HTML rozšírenia, ktoré sa následne ukladali z verzie do verzie. Následný paralelný vývoj IE a Netscape Navigator viedol k tomu, že IE získalo 95 % trhu. Stagnujúci vývoj IE zo 4.0 na 6.0 so slabou podporou štandardov, pomalým výkonom a vykresľovaním stránok viedol k oživeniu Netscape vo verzii 6.0, ktorá bola napísaná v novom engine Gecko. Aktualizovaný Netscape Navigator nedokázal dosiahnuť svoje predchádzajúce výšky a časom Netscape oznámil koniec podpory pre svoj prehliadač.
Engine Gecko však slúžil ako základ pre vytvorenie moderného prehliadača Mozilla Firefox v roku 2004. V roku 1996 sa objavila Opera, ktorá sa prejavila rýchlosťou a jednoduchosťou používania. V roku 2003 spoločnosť Apple vydala svoj prehliadač Safari s podporou WebKit, čím sa zriekla IE, ktorá sa predtým používala na Mac OS. V roku 2008 sa Google tiež rozhodol vstúpiť do pretekov prehliadačov vydaním prehliadača Google Chrome, ktorý je založený na rovnakom motore ako Safari.
Každý z prehliadačov má teda svoju históriu, má svoje verzie, ktoré sa zasa líšia podporou Javascriptu, HTML a CSS.

Dnes je podiel na globálnom trhu prehliadačov: 45 % pre IE, 31 % Firefox, 15 % Chrome, 5 % Safari a 2 % Opera.
Samostatne by som sa rád tešil z poklesu trhového podielu „starého“ a problematického prehliadača IE6, ktorý teraz zaberá len 6 %.

Kompatibilita medzi prehliadačmi

Kompatibilita medzi prehliadačmi znamená rovnaké zobrazenie a fungovanie stránky v rôznych prehliadačoch. V tejto téme sa nebudem zaoberať problémami JavaScriptu v rôznych prehliadačoch, ale zameriam sa na rozloženie.

Existujú dva hlavné spôsoby, ako dosiahnuť rovnaké zobrazenie webových stránok vo všetkých prehliadačoch:

Oddeľovanie štýlov pomocou podmienených komentárov

Oddelenie štýlov pre rôzne prehliadače je jedným z najbežnejších rozložení medzi prehliadačmi. Podstatou metódy je identifikovať typ prehliadača používateľa a použiť vhodný štýl spolu s hlavným.

Iba IE rozumie podmieneným komentárom, takže ostatné prehliadače budú čítať tento kód ako normálne komentáre.

Môžete nastaviť štýly, ktoré budú vidieť všetky prehliadače okrem IE:

Je tiež možné identifikovať verziu IE používateľa:
pre IE6
pre IE6 a vyššie
pre verziu IE menšiu ako 6
pre IE menej ako alebo rovné verzii 6
pre IE viac ako 6 verzií
a pripojenie vhodného štýlu pre každú verziu IE (číslo verzie IE je možné zmeniť na požadované).

Môžete sa vyhnúť nutnosti zahrnúť rôzne štýly CSS pre rôzne verzie IE definovaním verzií IE a priradením tried k telu:

A ich použitie v budúcnosti vo všeobecnom štýle pre každú verziu:
.ie6 .elementstyle (
pozadie: # 123;
}

Výhodou tejto metódy je opodstatnenosť jej použitia.

CSS hacky

Ďalším, nemenej bežným spôsobom rozloženia medzi prehliadačmi sú CSS hacky, ktoré umožňujú definovať vlastnosti pre konkrétne prvky.

Pre IE6:
.elementstyle (
_pozadie: # 123;
}
alebo:
.elementstyle (
-pozadie: # 123;
}
alebo platne:
* html .elementstyle (
pozadie: # 123;
}

Pre IE7:
* + html .style (
pozadie: # 123;
}
alebo platne:
*: prvé dieťa + html. štýl prvku (
pozadie: # 123;
}

Pre IE8:
.elementstyle (
pozadie: # F12 \ 3 /;
}

Pre Firefox:
@ -moz-document url-prefix () (
.elementstyle (
pozadie: # 123;
}
}

Pre Safari a Chrome (rovnaký engine, pamätáte?):
@media obrazovka a (-webkit-min-device-pixel-ratio: 0) (
... štýl prvku (
pozadie: # 123;
}
}
alebo
telo: posledné dieťa: nie (: koreň: koreň) .elementstyle (
pozadie: # 123;
}

Pre Operu sú veci zložitejšie. Hackom Opera CSS rozumejú Safari a Chrome, takže na prepísanie štýlu musíte použiť hack Opera a Safari \ Chrome spolu:
@media all and (min-width: 0px) (
hlava ~ telo .elementstyle (
pozadie: # 123;
}
}
telo: posledné dieťa: nie (: koreň: koreň) .elementstyle (
pozadie: #fff;
}
Alternatívou k týmto dvom hackom je zaujímavý spôsob, ako definovať štýly pre Operu pomocou vstavaného objektu „opera“ v JavaScripte:

Metóda je nespoľahlivá, pretože nebude fungovať, ak používateľ zakáže JavaScript.

Záver

Aby som to zhrnul: pri budovaní veľkých lokalít s veľkým počtom prvkov, počítajúc s ďalším rozvojom a rastom lokality, je stále vhodnejšie použiť oddelenie štýlov. Je to platné, je to pohodlné, je to dobrá forma. Nie je však nič zlé na používaní hackov CSS pre malé stránky, najmä preto, že mnohé z hackov sú tiež overené.

Na záver poviem, že v ideálnom prípade by ste sa mali snažiť opustiť používanie hackov a oddelenie štýlov a zlepšiť svoje schopnosti rozloženia.

Tagy: html-layout, css-hacks