• hjem
  •  > 
  • Multimedier
  •  > 
  • Tilslutning af CSS til individuelle browsere. CSS-hacks til alle browsere: fra IE til Opera Css til forskellige browsere

Tilslutning af CSS til individuelle browsere. CSS-hacks til alle browsere: fra IE til Opera Css til forskellige browsere

Udgivet: 06/07/2011

Jeg vil igen beskrive hacks kendt af alle og beskrevet 100.500 gange før for forskellige browsere.

Jeg vil give en definition af et hack fra Vlad Merzhevichs hjemmeside htmlbook.ru: "Et hack er et sæt teknikker, der sigter mod at indstille stilen for et bestemt element for en browser, som ville være forskellig fra stilen for andre browsere."

Først og fremmest var jeg interesseret i aktuelle arbejdsløsninger, så jeg testede alle eksemplerne i de nyeste versioner af browsere, undtagen IE (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Den mest "ulig" browser fra andre. Desuden er hver version "forskellig" på sin egen måde. Lad os dog acceptere virkeligheden, som den er. Men virkeligheden er, at der er nok hacks til forskellige versioner af IE ved kodning til at placere dem i en separat fil og kun downloade til denne familie af browsere. For at gøre dette, i afsnittet Lad os skrive en kommentar i HTML-dokumentet, som Internet Explorer kan genkende.



Du kan bruge følgende nøgleord som betingelse:

  • IE - enhver version af Internet Explorer-browseren;
  • IE 7 - Internet Explorer 7;
  • IE 8 - Internet Explorer 8;
  • IE 9 - Internet Explorer 9;
  • lt - browserversionsnummer mindre end specificeret;
  • gt - versionsnummer større end specificeret;
  • lte - versionsnummer mindre end eller lig med den angivne;
  • gte - browserversionsnummer større end eller lig med den angivne.

Måske vil jeg særskilt bemærke et andet hack til IE 7: en stjerne før vælgernavnet. For eksempel:

#eksempel (
farve: grøn;
* farve: rød;
}

Chrome og Safari

Hack til browsere baseret på webkit-motoren - Chrome og Safari:

@medieskærm og (-webkit-min-device-pixel-ratio:0) (
#eksempel (
farve: rød;
}

}

Firefox

@-moz-dokument url-præfiks() (
#eksempel (
farve: rød;
}

}

Opera

Der er ingen universelle hacks til Opera! Ja, selvfølgelig kan du finde hacks til Opera på internettet, men desværre er denne information lidt forældet. Der var engang et hack, men det hele kom ud:

@media alle og (min-bredde:0px) (


}

Hmm, hvis der er hacks til alle browsere, men ikke til Opera, foreslår en logisk konklusion: først skal du designe til Opera og derefter polere layoutet til andre browsere. Hvordan kan du lide det?

UPD 09.08.11: Seneste rapporter fra fronten: et hack til Opera blev fundet på Habré. Sådan her:

@media all and (-webkit-min-device-pixel-ratio:10000),
ikke alle og (-webkit-min-device-pixel-ratio: 0) (
#eksempel (farve: rød;)
}

Jeg anbefaler dog stærkt ikke at bruge det. Jeg vil citere kommentaren fra Vadim Makeev (alias Pepelsbey) som argument: "Disse hacks er afhængige af ufuldstændig eller buggy Media Queries-support og kan bryde med enhver mindre browseropdatering, der retter eller tilføjer support. Skyd ikke dig selv i foden ved at bruge potentielt farlige hacks.". Hvilket i virkeligheden er, hvad der skete med det første hack til Opera nævnt i denne artikel.

Baseret på dette mener vi stadig, at det bedste hack til Opera-browseren er et kompetent, gyldigt layout.

Som du ved, behandler ikke alle browsere css-stilfiler på samme måde. Grundlæggende opstår der problemer med gamle versioner af små softwarekreationer Internet Explorer(version 7 og derunder). Forresten, hvis problemet opstår i moderne browsere (som Opera, Mozilla Firefox, Chrome), så I Stærkt anbefale gennemgå sidelayoutet.

Så her er det. Der er et problem med browsere. Og jeg kender mindst tre måder at løse dette problem på.

Metode 1. Den mest korrekte

Styles til browsere, der ikke forstår din css korrekt, er skrevet i en separat fil. Normalt er denne browser, som jeg sagde Internet Explorer, og filerne hedder sådan fix-ie.css

... ... ...

Vi ændrer os navneTemaer til det rigtige navn på dit tema – og når du åbner Internet Explorer version 7 og derunder - denne fil vil blive tilføjet til det generelle sæt af stilfiler, og endda cachelagret, hvis caching er aktiveret.

Denne linje er ansvarlig for den version af browseren, som stilfilen vil blive forbundet til:



Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE , то подключить таблицу стилей из файла css/ie.css ".

Если необходимо указать конкретную версию браузера, то вместе с "IE " необходимо поставить ещё и номер версии. Например так:



Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6 . Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:



Denne stil vil blive anvendt på alle browserversioner IE under version 6. Hvis i stedet for " lt"sæt" lte", så ville dette betyde lavere end eller svarende til version 6.

I de fleste tilfælde er denne viden allerede nok, og vi skal forsøge ikke at kræve mere. Der er dog situationer, hvor disse metoder ikke er helt rimelige. For eksempel i en situation, hvor i en kæmpe CSS fil, kun 1-2 stilarter kræver et særligt udseende til individuelle browsere. I dette tilfælde er det dumt at oprette en separat enorm fil, som så forbindes gennem scripts eller gennem sådanne forhold. Det er derfor, de blev opfundet CSS hacks til browsere, hvilket er det, vi bevæger os til nu. Og vi starter med:

1) Internet Explorer. Det CSS hack virker til versioner IE7 og derunder. Efter min erfaring, browseren IE8 Det er allerede meget anstændigt, så jeg har ikke haft nogen problemer med det endnu. Men for browsere IE7 og nedenfor viser jeg hacket:

P(
* margin-top: 30px; # For browsere IE7 og derunder.
}

Som du kan se før den anden ejendom " margin-top"er et symbol" * ". Det er, hvad det er CSS hack. Det vil sige, at hvis du sætter "*" foran ejendomsnavnet, så vil denne egenskab kun blive anvendt på browsere IE7 og derunder. Konklusion: for alle browsere" margin-top"vil være i mening" 20 px", og til browsere IE7 og derunder i betydning" 30 px". Hvis du kun vil angive en stilart for IE6 og derunder(det sker ofte pga IE7 tingene er meget bedre, og oftest er der ingen grund til at redigere stilen for denne browser), så er der en anden CSS hack:

P(
margin-top: 20px; # Til alle browsere
_margin-top: 30px; # Til browsere IE6 og derunder.
}

Som det ikke er svært at bemærke, er den anden egenskab foranstillet af tegnet "_", som er CSS hack til browsere IE6 og derunder.

2) Mozilla Firefox. Det CSS hack virker kun for browsere Mozilla Firefox. Her er hans eksempel:

P, x:-moz-any-link (
margin-top: 30px;
}

Dette eksempel rapporterer, at stilen til vælgeren " s" vil kun gælde for browsere Mozilla Firefox, og alle andre browsere vil ignorere denne stil.

3) Opera. Det her CSS hack bruges til browsere Opera. Et eksempel på dets brug:

* |html p (
margin-top: 30px;
}

Her synes jeg også alt er klart.

Det var alt, jeg ville skrive i denne artikel. Det minder jeg dog endnu en gang om CSS hacks- det er dårligt, meget ofte består de ikke kodevaliditetskontrollen, og det er ikke længere godt. Generelt skal du prøve ikke at bruge dem eller kun bruge dem som en sidste udvej. Generelt anbefaler jeg, at du sætter dig ind i det, så vil du have færre problemer forbundet med forskellig præsentation af stilarter i browsere.

I denne artikel vil vi se på, hvad browserpræfikser er, hvorfor de findes, og hvordan man bruger dem i CSS.

Hvad er præfikser?

En webudvikler, der begynder at studere det teoretiske grundlag for CSS og bruger denne viden i praksis, kan støde på problemer, når de overvejer eksempler fra det virkelige liv. Dette kan få ham til at misforstå, hvad der sker, og afskrække yderligere lyst til at studere denne teknologi.

Når man for eksempel overvejer et websteds stilarter, kan en webudvikler støde på egenskaber, der indeholder nogle uforståelige ord foran: -webkit-, -moz-, -ms- osv.

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)

Hvad er det? Faktisk er alt enkelt, disse mærkelige ord er præfikserne for følgende browsere:

  • -webkit- : Chrome, Safari, Opera browsere;
  • -moz- : Mozilla Firefox browser;
  • -ms- : Internet Explorer browser.

Hvis der således er et præfiks før ejendomsnavnet, betyder det, at denne egenskab er implementeret og udelukkende vil blive brugt i den angivne browser. Alle andre browsere vil ignorere denne egenskab, fordi for dem er dette præfiks kendt.

Årsager til forekomsten af ​​præfikser?

Der var en hel del grunde til forekomsten af ​​præfikser:

  • At inkludere eksperimentelle CSS-egenskaber i browseren, som endnu ikke er godkendt af standarden. Således tester browserleverandører og kommer med forslag, før de indfører CSS-egenskaber i standarden.
  • For at løse problemer med cross-browser-kompatibilitet.
  • At lave dine egne egenskaber, som ikke er inkluderet i CSS-standarden, men som kan dukke op i den efter et stykke tid.

Når en eksperimentel egenskab er godkendt i standarden og testet i browseren, får den normalt sit præfiks fjernet.

Hvordan bruger man præfikser?

Overvej følgende kode som et eksempel:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)

Denne kode anvender CSS-egenskaber, der ændrer bredde- og højdeberegningsalgoritmen for alle elementer på websiden. Den første CSS-egenskab -webkit-box-sizing med border-box-værdien er beregnet til browsere, der bruger webkit (Safari) eller blink (Chrome, Opera, Yandex.Browser) motor. Den anden CSS-egenskab -moz-box-sizing med værdien border-box er beregnet til browsere, der bruger Gecko-motoren (Mozilla Firefox). Den sidste CSS-egenskab er beregnet til browsere, hvor egenskaben allerede er testet og implementeret i henhold til standarden.

Når du bruger præfikser til CSS-egenskaber, skal du huske, at de skal placeres før CSS-egenskaben uden præfiks. Hvorfor er dette så vigtigt? Dette er vigtigt, fordi hvis browseren en dag implementerer den oprindelige egenskab (uden et præfiks), så vil den blive brugt (da den er placeret sidst), og ikke dens eksperimentelle version.

For eksempel: Anvendelse af en CSS-ejendom på alle elementer på en webside i Google Chrome version 40.

På billedet ovenfor kan du se, at den originale box-sizing-egenskab allerede er implementeret i denne browser, og fordi den kommer sidst, bruger browseren den i stedet for ovenstående -webkit-box-sizing-egenskab.

Hvordan tjekker man understøttelse af en bestemt ejendom i browseren?

Et websted, hvor du kan kontrollere, om denne egenskab er implementeret eller ej i en bestemt browser, kan findes på nedenstående link. Derudover viser siden antallet af brugere i procent, der bruger denne version af browseren.

Hjemmeside "Kan jeg bruge..."

For eksempel: Lad os tjekke, hvordan transformegenskaben er implementeret i browsere.

På CanIUse-webstedet er browsere markeret i forskellige farver afhængigt af supporttilstanden for visse egenskaber eller tags:

  • Det røde rektangel er en browser, hvor denne egenskab ikke er implementeret;
  • Et grønt rektangel med en bindestreg placeret i øverste højre hjørne er en browser, hvor denne egenskab bruges gennem et præfiks;
  • Et lysegrønt rektangel er en browser, hvor denne egenskab er delvist implementeret;
  • Det grønne rektangel er en browser, hvor denne egenskab er implementeret i overensstemmelse med standarden.