Hack met behulp van CSS-expressie. Hack met behulp van een symbool

Voor elke goede lay-outontwerper rijst op een gegeven moment de kwestie van compatibiliteit tussen browsers. Wat is cross-browsercompatibiliteit? Deze eigenschap van een site of site-ontwerp wordt in verschillende browsers hetzelfde weergegeven. Feit is dat ontwikkelaars bij het maken van browsers niet veel nadenken over standaardisatie; dit leidt tot verschillende representaties van dezelfde site in hun producten. Door een cross-browser layout/site te maken, kunt u dit verschil overbruggen.

Voor dit doel zijn in de CSS-taal zogenaamde hacks (cheats) uitgevonden, waarmee je een groep eigenschappen slechts op één of meerdere browsers kunt toepassen, bijvoorbeeld alleen Opera of alleen Chrome/Safari.

Dit artikel presenteert mogelijke werkopties voor de nieuwste versies van browsers, alle hacks zijn getest nieuwste versie vanaf 10 mei 2015. Als dit artikel je heeft geholpen of als je nog vragen hebt, stel ze dan in de reacties en beoordeel het, dit kan ons aanmoedigen om het aantal hacks voor uit te breiden verschillende browsers, en voeg voor elk gebruiksvoorbeelden toe.

Als de hack rechtstreeks in de tabel is geschreven, moet u deze, om deze te gebruiken, naar een .CSS-bestand kopiëren en aan uw stijl aanpassen, anders zal er in plaats van de naam een link zijn met gedetailleerde beschrijving hoe je de hack uitvoert.

Compatibiliteitstabel voor hacks Benoemt en hackt zichzelf Internet Explorer Google Chrome Opera Safari Mozilla Firefox

	+	-	-	-	-
	-	+	-	-	-
	-	-	+	-	-
_::-moz-svg-foreign-content, :root .class ()	-	-	-	+	-
html/**/body .class, x:-moz-any-link, x:default (kleur: #F00;)	-	-	-	-	+
	-	+	+	+	-
@supports (-webkit-appearance:none) ( /* hier zijn uw stijlen in hun normale vorm */ )	-	+	+	-	-

De eenvoudigste en meest effectieve optie is om voor alle versies van IE een apart .css-bestand te maken en dit samen met de hoofdversie te verbinden, maar op een speciale manier.

Voorwaardelijke opmerkingen werken alleen in IE op Windows; voor andere browsers zijn het normale opmerkingen, dus ze kunnen probleemloos worden gebruikt. De syntaxis is deze (voeg in het .php- of .html-bestand, waar we het stijlbestand verbinden, de volgende regels toe):

waarbij style.css een bestand is dat alleen verantwoordelijk is voor stijlen voor IE.

De enige die bekend is op dit moment een manier om alleen stijlen voor Google Chrome te schrijven, met behulp van JavaScript. U hoeft JS niet te kennen, neem gewoon het voorbeeld hier en pas het aan uw behoeften aan.

Het komt er op neer dat we controleren welke browser de sitebezoeker gebruikt en of het Google Chrome is, dan koppelen we deze voor hem aan extra bestand stijlen, waarin de noodzakelijke eigenschappen die elkaar kunnen overlappen in het hoofdstijlbestand, selecteert u !important.

sectie, voeg de volgende regels toe aan de tag):

var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //pad naar het stylesheet alleen voor Chrome link.media = "all" ;

De enige momenteel bekende manier om alleen-Opera-stijlen te schrijven met behulp van JavaScript. U hoeft JS niet te kennen, neem gewoon het voorbeeld hier en pas het aan uw behoeften aan.

Het komt er op neer dat we controleren welke browser de sitebezoeker gebruikt en of het Opera is, dan koppelen we er een extra stijlbestand voor, waarin we de noodzakelijke eigenschappen die elkaar kunnen overlappen in het hoofdstijlbestand, !important selecteren.

De syntaxis is deze (in het .php- of .html-bestand, waar we het stijlbestand opnemen, d.w.z. voeg in de sectie de volgende regels toe binnen de tag):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //pad naar het stijlbestand alleen voor Opera link.media = "all" ;

Het enige wat je hier hoeft te veranderen is in regel 10 het pad naar je stijlbestand.

Bedankt allemaal voor uw aandacht, we proberen het graag voor u. Wij herhalen dat wij uw opmerkingen, suggesties voor verbetering, etc. van harte verwelkomen.

Bij het gebruik van semantische lay-out zal elke ontwikkelaar zeker compatibiliteitsproblemen tussen browsers tegenkomen, om deze op te lossen is het in de meeste gevallen noodzakelijk om zogenaamde “hacks” te gebruiken. Meestal verwijst deze term naar een speciale manier om selectors of regels te schrijven die alleen door een specifieke browser wordt begrepen. De CSS-compatibiliteit in de meeste browsers heeft echter een punt bereikt waarop het gebruik van hacks beperkt zou moeten worden.

In de regel is Internet Explorer de belangrijkste bron van problemen. De verscheidenheid aan fouten bij de implementatie van CSS in Microsoft-browsers verrast zelfs de meest ervaren lay-outontwerpers. Hierdoor ontstaan er situaties waarin het nodig is om aanvullende of alternatieve regels voor IE te gebruiken. In dergelijke gevallen wordt het aanbevolen om hacks te gebruiken. Als je plotseling alternatieve regels nodig hebt, bijvoorbeeld alleen voor Firefox, dan is het aan te raden om je code te herzien, en in 99% van de gevallen zul je meer vinden elegante oplossing.

De meest populaire hack van vandaag blijft de zogenaamde "ster html-hack":

#element ( position:relative; /* Basisregel voor alle browsers */ ) * HTML #element ( position:static; /* Herdefinitie van de regel voor IE vóór de zevende versie */ )

In geldige HTML- en XHMTL-documenten HTML-kiezer speelt altijd de rol van het wortelelement, en BODY is het kind van het eerste niveau, maar niet van het tweede of hoger hoog niveau. In theorie zou de selector "*HTML" dus op geen enkel element moeten worden toegepast. Maar in de praktijk IE vijfde en zesde versie vanwege een fout in eigen motor interpreteer de gegeven selector als HTML en pas de gespecificeerde regels toe. Omdat de rest moderne browsers de "*HTML"-selector wordt genegeerd, deze techniek kan worden gebruikt voor egoïstische doeleinden. Dit is nuttig, maar is het juist?

Ondanks het feit dat deze hack vanuit het oogpunt van de CSS-standaard correct is, zijn er een aantal negatieve nuances.

Hoe kun je Internet Explorer temmen zonder hacks te gebruiken?

Alternatieve uitgang

Er is een betere oplossing in de diepten van het Microsoft Developer Network - . Deze technologie wordt ondersteund in Internet Explorer vanaf de vijfde versie en dekt daarmee alle browsers die voor ons van belang zijn. Hieronder ziet u een voorbeeld van elegant gebruik van voorwaardelijke opmerkingen:

Bij de gebruikelijke verbinding van CSS-bestanden zien alleen browsers uit de Internet Explorer-familie de tweede regel en laden daarom het CSS-bestand. Dit gebeurt vanwege de aandoening die inherent is aan voorwaardelijk commentaar- als IE. Deze voorwaarde betekent "als Internet Explorer" en Explorers-versies vijf en hoger (inclusief de laatste zevende) de code in de opmerking lezen en interpreteren.

Zo kunnen al onze hacks in een apart bestand worden geplaatst:

stijl.css:

#element ( position:relative; /* Basisregel voor alle browsers */ )

#element ( position:static; /* De regel voor IE alle versies overschrijven */ )

Nu gebruiken we geen hacks in het hoofdstijlblad; zorgde ervoor dat de alternatieve regel werd toegepast op alle ontdekkingsreizigers, inclusief de zevende; en ook opgeslagen gebruikers alternatieve browsers tegen het laden van onnodige code. Tegelijkertijd hebben we onze (X)HTML en CSS geldig gehouden, aangezien een dergelijke voorwaardelijke opmerking door niemand anders dan IE wordt herkend, zelfs niet door de W3C-validator.

Voorwaardelijke opmerkingen zijn flexibeler dan één voorbeeld suggereert. Je kunt niet alleen alle Explorers behandelen, maar ook alle versies ervan onder of boven een bepaalde of specifieke versie ervan; en ook code laden die door alle browsers behalve Internet Explorer wordt geïnterpreteerd. Helaas is dit een onderwerp voor een apart artikel en moet de lezer zelf vertrouwd raken met deze mogelijkheden.

positie: relatief

De IE/Win verdwijnende lijst-achtergrondbug
IE6 Grenschaos

Deze regel wordt ook vaak toegepast op spontaan verdwijnende blokken. Niet vallend of verkeerd weergegeven, maar verdwijnend. Vooral Internet Explorer 5.0 maakt zich hier schuldig aan.

hoogte: 1%

De IE6 Three Pixel Text-Jog
De IE Escape Floats-bug
IE en cursief (wees voorzichtig met 5.0, gebruik escape)
IE/Win-bug met niet-scrollbare inhoud
IE/Win Guillotine-bug

Wordt ook gebruikt voor het opruimen van elementen. Zet het in een container met drijvers.

weergave: inline

Vlotters, marges en IE
De IE verdubbelde marge-bug

weergave: inline-blok

Eigenzinnige percentages in het visuele opmaakmodel van IE6

Analoge hoogte: 1% voor IE 7.

En nog een paar tips:

Gebruik deze regels eerst alleen voor IE als dat mogelijk is. En voor verschillende versies de oplossing kan variëren (vaker geldt dit voor hoogte: 1% en zoom: 1).

Ten tweede, wanneer u wordt geconfronteerd met ongewenst Explorer-gedrag waarvoor geen gedocumenteerde verklaring bestaat (of u bent gewoon te lui om ernaar te zoeken), probeer dan opeenvolgend alle regels toe te passen die van invloed zijn op de eigenschap hasLayout op het problematische element. De sequentiële zoekmethode wordt in ons vakgebied heel vaak gebruikt.

Iedereen die betrokken is bij webontwerp is dit probleem tegengekomen: wanneer alle browsers normaal gesproken de stijl weergeven die op de pagina is toegepast, en slechts één "klootzak" de pagina ontsiert. Meestal wordt deze “klootzak” browser Internet Explorer, vooral versie 6 en lager, die door ongeveer 7-8% van de internetgebruikers wordt gebruikt. Ben het ermee eens dat dit nogal veel is om ze gewoon te negeren. Hoewel andere browsers (zelfs moderne) soms verrassingen laten zien. Om ervoor te zorgen dat elke browser uw pagina correct weergeeft, hebben we daarom een CSS-hacks.

CSS-hack is speciale syntaxis stijl die slechts één specifieke browser begrijpt. Bovendien verschillen CSS-hacks vaak zelfs voor verschillende versies van dezelfde browser.

Voordat ik echter verder ga met CSS-hacks, zou ik het willen hebben over een andere manier om stijlen te scheiden, wat meer de voorkeur heeft: met met behulp van PHP of JavaScript, waarin we het type en de versie van de browser kunnen bepalen en in overeenstemming hiermee het juiste stijlbestand kunnen koppelen. We zullen deze methode niet overwegen, omdat je, om het te begrijpen, een minimale kennis van deze talen nodig hebt.

Een andere manier is te wijten aan het feit dat IE de belangrijkste "deserteur" in de regel is. Daarom is er een aparte methode voor bedacht, zelfs zonder het gebruik van scripts. Het bestaat uit voorwaardelijke opmerkingen aan de kop van het document (in de tag). Het werkt alleen voor IE-browsers, maar in de regel zijn er problemen mee deze methode kan heel vaak gevonden worden. Het ziet er zo uit:

Als het in het Russisch wordt vertaald, zal het ongeveer zo zijn: “Als de browser van de gebruiker IE is, sluit dan het stijlblad uit het bestand aan css/ie.css".

Als u een specifieke versie van de browser moet opgeven, moet u naast “IE” ook het versienummer vermelden. Bijvoorbeeld als volgt:

Zoals je misschien wel raadt, wordt de stijl alleen toegepast op browsers IE versie 6. Het kan ook nodig zijn om het onderstaande browserstijlblad te specificeren bepaalde versie. In dit geval wordt deze syntaxis gebruikt:

Deze stijl wordt toegepast op alle versies van IE-browsers onder versie 6. Als we in plaats van "lt" "lte" zouden plaatsen, zou dit lager of gelijkwaardig aan de 6e versie betekenen.

In de meeste gevallen is deze kennis al voldoende, en we moeten proberen niet nog meer te eisen. Er zijn echter situaties waarin deze methoden niet geheel redelijk zijn. Bijvoorbeeld in een situatie waarin een enorme CSS-bestand, hebben slechts 1-2 stijlen een speciaal uiterlijk nodig voor individuele browsers. In dit geval is het dom om een apart groot bestand te maken, dat vervolgens via scripts of dergelijke voorwaarden met elkaar wordt verbonden. Dit is de reden waarom CSS-hacks voor browsers zijn uitgevonden, waar we nu mee verder gaan. En we beginnen met:

1) Internet Explorer. Deze CSS-hack werkt voor versies van IE7 en lager. Zoals mijn ervaring leert, is de IE8-browser al heel behoorlijk, dus ik heb er nog geen problemen mee gehad. Maar voor browsers IE7 en lager laat ik een hack zien:

P(
* marge bovenaan: 30px; # Voor browsers IE7 en lager.
}

Zoals u kunt zien, wordt de tweede eigenschap "margin-top" voorafgegaan door het symbool "*". Dit is een CSS-hack. Dat wil zeggen, als u "*" vóór de eigenschapsnaam plaatst dit pand is alleen van toepassing op browsers IE7 en lager. Conclusie: voor alle browsers zal de “margin-top” “20px” zijn, en voor browsers IE7 en lager zal deze “30px” zijn. Als je de stijl alleen voor IE6 en lager moet specificeren (dit gebeurt vaak, omdat de zaken veel beter zijn met IE7 en meestal is het niet nodig om de stijl voor deze browser te bewerken), dan is er nog een CSS-hack:

P(
marge bovenaan: 20px; # Voor alle browsers
_marge-top: 30px; # Voor browsers IE6 en lager.
}

Zoals het niet moeilijk op te merken is, wordt de tweede eigenschap voorafgegaan door een “_”-teken, wat een CSS-hack is voor browsers IE6 en lager.

2) Mozilla Firefox. Deze CSS-hack werkt alleen voor Mozilla-browsers Firefox. Hier is zijn voorbeeld:

P, x:-moz-any-link (
marge bovenaan: 30px;
}

IN in dit voorbeeld Er wordt gemeld dat de stijl voor de "p"-selector alleen zal worden toegepast op Mozilla Firefox-browsers, en dat alle andere browsers deze stijl zullen negeren.

3) Opera. Deze CSS-hack wordt gebruikt voor Opera-browsers. Een voorbeeld van het gebruik ervan:

* |html-p (
marge bovenaan: 30px;
}

Hier denk ik dat alles ook duidelijk is.

Dat is alles wat ik in dit artikel wilde schrijven. Ik herinner je er echter nogmaals aan dat CSS-hacks vaak slecht zijn; ze komen niet door de geldigheidscontroles van de code, en dat is niet langer goed. Probeer ze in het algemeen niet te gebruiken, of gebruik ze alleen in de meeste gevallen als laatste redmiddel. Over het algemeen raad ik u aan om er vertrouwd mee te raken, dan zult u minder problemen ondervinden die verband houden met de verschillende presentatie van stijlen in browsers.

In Internet Explorer 7 (IE7) vs. vorige versie is opgelost groot aantal fouten. Er zijn echter nieuwe fouten verschenen die ook schrijven vereisen aparte code voor deze browserversie. Hieronder volgen hacks voor de zevende versie van de Internet Explorer-browser.

Gebruik!ie

In de zevende versie werd de bug met !important opgelost, maar verscheen er een nieuwe. Als u na de eigenschap een spatie toevoegt uitroepteken en elke set tekens, dan wordt de eigenschap style correct geaccepteerd in plaats van genegeerd. Meestal wordt de !ie-notatie gebruikt en slaan alle browsers behalve IE6 en IE7 deze stijl over. Houd er rekening mee dat de hack resulteert in ongeldige CSS-code.

Kaki .hack (achtergrond: oranje; /* Oranje kleur */ achtergrond: groen !ie; /* Groene kleur */ opvulling: 10px; kleur: #fff; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt.

In dit voorbeeld geven IE6 en IE7 de achtergrondkleur van het blok groen weer, andere browsers oranje.

Gebruik!!belangrijk

Een ander probleem met !important is dat IE7 illegale tekens in de invoer toestaat. Alle browsers zullen de belangrijke constructie negeren, maar IE6 en IE7 beschouwen het als correct. Het gebruik van een dergelijke invoer resulteert in ongeldige CSS.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Kaki .hack (achtergrond: oranje; /* Oranje kleur */ achtergrond: groen !!belangrijk; /* Groene kleur */ kleur: #fff; vulling: 10px; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy Nibh euismod is een van de weinige dolore magna aliguam is een volutpat.

In dit voorbeeld zal in IE6 en IE7 de achtergrondkleur van het blok groen zijn, in andere browsers zal deze oranje zijn.

Asterisk vóór de naam van de selector

Het toevoegen van een asterisk (*) vóór de naam van een stijleigenschap is in strijd met de CSS-specificatie, maar wordt wel begrepen door Internet Explorer tot en met versie 7.0. Daarom werken eigenschappen met een asterisk ervoor alleen in deze browserfamilie.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Khaki .hack ( achtergrond: oranje; /* Oranje kleur (voor alle browsers) */ *achtergrond: groen; /* Groene kleur (voor IE7 en lagere browsers) */ kleur: #fff; opvulling: 10px; ) Lorem ipsum dolor zit amet...

In dit voorbeeld groente De achtergrond van het blok wordt alleen ingesteld voor de internetbrowser Explorer-versies 7.0 en lager. In andere browsers is de achtergrondkleur oranje.

Constructie *:eerste kind+html

De *:first-child+html-constructie die vóór de selectornaam is toegevoegd, werkt alleen voor Internet Explorer 7. Het voordeel is dat deze voldoet aan de CSS-specificatie.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Kaki *:eerste kind+html .hack ( achtergrond: groen; /* Groene kleur */ ) .hack ( achtergrond: oranje; /* Oranje kleur */ kleur: #fff; opvulling: 10px; ) Lorem ipsum dolor sit amet ...

In dit voorbeeld wordt de achtergrondkleur van het blok alleen voor IE7 op groen ingesteld. In andere browsers is de achtergrondkleur oranje.

In de regel is Internet Explorer de belangrijkste bron van problemen. De verscheidenheid aan fouten bij de implementatie van CSS in Microsoft-browsers verrast zelfs de meest ervaren lay-outontwerpers. Hierdoor ontstaan er situaties waarin het nodig is om aanvullende of alternatieve regels voor IE te gebruiken. In dergelijke gevallen wordt het aanbevolen om hacks te gebruiken. Als u plotseling alternatieve regels nodig heeft, bijvoorbeeld alleen voor Firefox, dan is het raadzaam uw code te herzien en in 99% van de gevallen zult u een elegantere oplossing vinden.

CSS-hacks voor Opera-browser*|html .style ( achtergrond: #F00; ) html:first-child .style ( achtergrond: #F00; ) CSS-hacks voor FireFox-browser@-moz-document url-prefix() ( .style (achtergrond: #F00;) ) CSS-hacks voor Internet Explorer 6.0 en lager .style ( _background: #F00; ) * html .style (achtergrond: #F00; ) CSS hacks voor Internet Explorer 7.0 *+html .style (achtergrond: #F00; ) html>body .style ( *achtergrond: #F00; ) CSS-hacks voor Safari-browser body:last-child:not(:root:root) .style ( achtergrond: #F00; ) html body:last-child .style ( achtergrond: #F00; )

Voor Internet Explorer is er wel alternatieve oplossing- voorwaardelijke opmerkingen (voorwaardelijke opmerkingen). Deze technologie wordt ondersteund in Internet Explorer vanaf de vijfde versie en dekt daarmee alle browsers die voor ons van belang zijn. Hieronder ziet u een voorbeeld van het gebruik van voorwaardelijke opmerkingen:

De eerste regel is normale verbinding CSS-bestanden worden echter alleen op de tweede regel gezien en daarom wordt het CSS-bestand alleen geladen door browsers uit de Internet Explorer-familie. Dit gebeurt dankzij de voorwaarde die is ingebed in het voorwaardelijke commentaar - als IE. Deze voorwaarde betekent: “Als Internet Explorer en Explorer versie vijf en hoger de code in de opmerking lezen en interpreteren.

Zo kunnen al onze hacks in een apart bestand worden geplaatst.

En laat ik mezelf nog een keer herhalen. De tijd van IE6 loopt ten einde en tegenwoordig worden bijna alle moderne browsers weergegeven geldige code behoorlijk adequaat. Daarom, als u problemen ondervindt bij het weergeven van een pagina in welke browser dan ook, voordat u uw toevlucht neemt tot hacks, controleer dan uw code opnieuw, experimenteer, zoek naar informatie op internet, en hoogstwaarschijnlijk kunnen onnodige hacks worden vermeden, waardoor de absolute geldigheid van uw code wordt bereikt. .