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 ExplorerGoogle 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.

Van de auteur: Als je al minstens een paar jaar front-end-ontwikkeling doet, heb je waarschijnlijk al CSS-hacks gebruikt. Als u echter nog nieuw bent, heeft u het misschien gehoord deze termijn, maar begrijp de betekenis ervan niet volledig. In dit artikel leg ik uit wat een CSS-hack is en hoe je deze kunt gebruiken. Maar eerst zal ik uitleggen waarom ik besloot dit artikel te schrijven.

Ontwikkelaars begrijpen de betekenis van de term verkeerd

Zoals velen van jullie hebben gehoord, heeft SitePoint onlangs de resultaten gepubliceerd van een groot CSS-onderzoek, en ik heb ze samengevat in een apart artikel. Eén van de vragen was: Voor welke van de volgende Microsoft-browsers schrijf je CSS-hacks?

Toen ik de enquêteresultaten voor het eerst verwerkte, miste ik een kleine discrepantie in de antwoorden op deze vraag, maar David Storey, een ingenieur bij Microsoft die hielp bij het maken van hun nieuwe browser, merkte het op. 1.418 mensen stemden en de resultaten waren als volgt:

De resultaten zijn teleurstellend: het is slecht dat meer dan 60% van de ontwikkelaars CSS-hacks schrijft voor IE9 en IE10. Maar Edge kreeg 45%? Er zijn enkele gepubliceerde hacks voor Edge, maar deze staan ​​nog niet op de Browserhacks-site. Het is hoogst ongebruikelijk dat zoveel mensen hacks voor deze browser gebruiken. De grotere vraag is: welke CSS-weergaveproblemen komen Edge-ontwikkelaars tegen die vereisen dat ze hun toevlucht moeten nemen tot hacks?

In eerste instantie dacht ik dat mensen hacks verwarden met browserdetectie. Maar zelfs dat verklaart niet de hoge cijfers voor Edge.

Toen besefte ik dat mensen de vraag niet helemaal begrepen hadden; mensen denken dat "CSS-hacks voor browser X" hetzelfde is als "Browser X-ondersteuning". Er kan geen andere logische verklaring zijn, vooral gezien de grote percentages andere browsers die geen hacks nodig hebben.

Laten we al diegenen geven die verward zijn in concepten nauwkeurige definitie Wat is een hack?

Wat is een CSS-hack?

Een hack is een soort code CSS-bestand, waarvan de stijlen alleen van toepassing zijn op gespecificeerde browsers, en wordt door anderen genegeerd. Laten we eens kijken naar een voorbeeld. Dit is een CSS-hack:

* html .zijbalk (marge-links: 5px;)

*html. zijbalk ( marge - links: 5px;

De bovenstaande CSS-code (ook bekend als de "*-html"-hack) is alleen van toepassing op IE6 en lager. De meeste ontwikkelaars die IE 6 ondersteunen, maken het niets meer uit vroege versies, dus we kunnen ervan uitgaan dat deze hack alleen voor IE6 is.

Hier is de hack het asterisk-teken vóór “html”. Het is een combinatie universele keuzeschakelaar en typekiezer. Iemand heeft ontdekt dat deze twee selectors er samen voor zorgen dat de gegeven selectors alleen inwerken bepaalde versies IE, en worden door andere browsers genegeerd. Die. de linkermarge van .sidebar in het bovenstaande voorbeeld zal alleen in IE6 en lager zijn. De CSS-code is correct geschreven en u zult geen foutmeldingen of waarschuwingen zien (meer details hieronder). Hier is nog een voorbeeld van Browserhacks, dit keer voor IE11:

_:-ms-volledig scherm, :root .selector ( marge-links: 5px; )

_: -ms - volledig scherm,: root. keuzeschakelaar ( marge - links: 5px;

Ik zal niet in detail treden en uitleggen waarom de bovenstaande code een hack is (deels omdat ik niet helemaal zeker weet of ik het goed begrijp), maar de bovenstaande code werkt alleen in IE11. Browserhacks zegt zelfs "IE11 en hoger", dus we kunnen ervan uitgaan dat het ook in Edge werkt. Maar ik heb dit niet gecontroleerd. Het gaat er niet om voor welke browsers de hack is geschreven, maar of we goed begrijpen wat het is.

Maken CSS-hacks code ongeldig?

Als uw code gehackt is, kunt u waarschuwingen en/of fouten krijgen als u het bestand door de W3C CSS-validator laat lopen. Deze dienst zal u niet 100% vertellen of uw code hacks bevat of niet.

Er zijn momenten waarop er hacks in de CSS-code zitten, maar er zijn geen fouten of waarschuwingen. Als u bijvoorbeeld alleen de *-html-hack voor IE6 gebruikt, zal uw code gemakkelijk de validatie doorstaan.

Bovendien gebruiken sommige hacks (zoals de IE11-hack die ik hierboven noemde) leveranciersvoorvoegsels (bijvoorbeeld: -ms-fullscreen). Als u in dit geval de instellingen in de validator zelf niet wijzigt, wordt het bestand file zal worden getest, en de service toont het bericht:

Maar als u helemaal naar het validatorscherm scrolt, ziet u een waarschuwing:

IN in dit geval Ik ben gewaarschuwd dat: -ms-fullscreen "een onbekende pseudo-klasse is met een leveranciersvoorvoegsel." Als u dit soort waarschuwingen als fouten beschouwt, kunt u in de validator het tabblad 'Meer opties' openen en deze waarschuwingen als fouten laten herkennen:

Selecteer in het gedeelte 'Verkoperextensies' de optie 'Fouten' in de vervolgkeuzelijst. Tijdens de verificatie zal uw bestand dan niet worden gevalideerd als het leveranciersvoorvoegsels of andere code voor bepaalde browsers bevat (niet noodzakelijkerwijs hacks). Aan de andere kant kun je het vrij eenvoudig als volgt schrijven:

Voorbeeld ( marge-links: 5px\9; )

Voorbeeld ( marge - links: 5px \ 9;

Deze code werkt in IE8 en lager. Hier is de hack terugslag en negen (\9). In de meeste browsers wordt de hele regel genegeerd vanwege de \9. Maar om onbekende redenen werkt een dergelijke invoer in IE8 en lager vrij normaal. In dit voorbeeld zal er, ongeacht de validatie-instellingen, een fout verschijnen en zullen de stijlen niet door de validatie komen:

Welke methoden kunnen geen hacks worden genoemd?

De onderstaande methoden en technieken zijn niet noodzakelijkerwijs CSS-hacks:

!belangrijk is geen hack

CSS-reeks met!belangrijk aan het einde is helemaal niet relevant voor dit onderwerp. Dit is een geldige CSS-invoer die niet bedoeld is om in een bepaalde browser te werken. Dit is geen hack, maar kan als een slechte CSS-stijl worden beschouwd.

Leveranciersvoorvoegsels zijn niet altijd hacks

Voorvoegsels van leveranciers zijn gericht op specifieke browsers, maar worden gewoonlijk geen hacks genoemd. In de meeste gevallen wordt bij het gebruik van leveranciersvoorvoegsels ook gestandaardiseerde code geschreven. Dit is geen hack. IN in sommige gevallen Code met leveranciersvoorvoegsels kan als een hack worden beschouwd. Een voorbeeld is de code hierboven _:-ms-fullscreen. Een ander voorbeeld is de inclusie hardwareversnelling in WebKit-browsers. Maar toch zijn leveranciersvoorvoegsels voor het grootste deel een apart onderwerp. Er is documentatie op de W3C-website voor code met leveranciersvoorvoegsels, wat het idee ondersteunt dat dergelijke code niet als een hack mag worden beschouwd.

Zeer specifieke selectors zijn geen hacks

Als u de specificiteit van selectors vergroot om bepaalde stijlen te overschrijven, kan dit geen hack worden genoemd (bijvoorbeeld body .content #sidebar p). Dit is slecht CSS-stijl, maar geen hack.

De oude syntaxis is ook geen hack

Goed voorbeeld– complexe Flexbox-code ter ondersteuning van oudere browsers. Naast het feit dat dergelijke code tegenwoordig niet meer relevant is, zou ik het geen hack willen noemen. Op het moment dat browsers dit ondersteunden oud bericht selectors, de code was volledig geldig. Het effect van deze code is precies hetzelfde als de hack, maar ik denk niet dat ze hetzelfde zijn.

Zijn voorwaardelijke opmerkingen een hack?

Voorwaardelijke opmerkingen, waarmee u CSS- of zelfs HTML-code voor specifieke versies van IE kunt schrijven, nemen een onzekere positie in. HTML-code die op een bepaalde manier is geschreven, is volkomen geldig, maar toch kan de invoer zelf als een hack worden geclassificeerd.

In 2008 populariseerde Paul Irish wat wij voorwaardelijke klassen noemen, waarvan ik zeker weet dat velen van ons dit hebben gebruikt. Voorwaardelijke klassen werden gespecificeerd in voorwaardelijke opmerkingen en werden alleen beschikbaar in bepaalde versies van IE, d.w.z. In bepaalde versies van IE was het mogelijk om geldige CSS-code te gebruiken.

Zijn voorwaardelijke opmerkingen een CSS-hack? Ik zou ja antwoorden, zelfs alleen maar omdat ze dezelfde taak uitvoeren als gewone CSS-hacks.

Moet je CSS-hacks gebruiken?

Net als bij andere vragen op het gebied van webontwikkeling is er geen exact antwoord. Het zou juister zijn om te zeggen afhankelijk van het geval. Voorstanders van codezuiverheid zullen zeggen dat het beter is om geen hacks te gebruiken. Maar vaak zijn de zaken niet zo eenvoudig. Ik adviseer:

Doe er alles aan om geldige, gestandaardiseerde CSS-code voor meerdere browsers te schrijven, zonder hacks, binnen het budget en de tijd die voor het project zijn toegewezen.

Als je alles hebt geprobeerd mogelijke opties, of als je niet de tijd of het budget hebt om de code correct te repareren, gebruik dan hacks.

Gebruik bij het schrijven van hacks het advies van Harry Roberts, zodat u, als u tijd of geld heeft, de code gemakkelijk kunt weggooien of opnieuw kunt bewerken.

Geef altijd commentaar op hacks en refactor-code waar mogelijk.

Als resultaat

Als u zich niets van dit artikel herinnert, onthoud dan slechts één zin: CSS-hacks passen code toe op een of meer browserversies, andere browsers worden genegeerd. Dit is de eenvoudige definitie van een CSS-hack. Het feit dat u Microsoft Edge in CSS ondersteunt, betekent niet dat u daarvoor hacks moet schrijven; ondersteuning is een heel ander onderwerp.

Je bent het misschien niet eens met sommige uitspraken in dit artikel, maar ik denk dat de meeste ontwikkelaars die begrijpen wat een hack is het eens zullen zijn met de bovenstaande generalisatie.

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 in dit voorbeeld IE6 en IE7 zullen de achtergrondkleur van het blok groen weergeven, andere browsers zullen oranje zijn.

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.

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 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.

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 speelt de HTML-selector altijd de rol van het hoofdelement, en BODY is het onderliggende element van het eerste niveau, maar niet het tweede of meer. 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:

Normale verbinding CSS-bestanden zien echter alleen browsers uit de Internet Explorer-familie de tweede regel en laden daarom het CSS-bestand. Dit gebeurt dankzij de voorwaarde die is ingebed in het voorwaardelijke 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 sindsdien onze (X)HTML en CSS geldig gehouden voorwaardelijk commentaar wordt door niemand anders dan IE 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.

In dit bericht heb ik geprobeerd alle CSS-hacks te verzamelen die ik ken. Velen twijfelen misschien aan hun behoefte aan normale moderne browsers, omdat de meeste hacks altijd alleen voor IE zijn gebruikt, maar dit bericht is meer voor nieuwsgierigen :), het is over het algemeen beter om geen hacks in de lay-out te gebruiken. Maar hoe dan ook, aangezien ze bestaan, is het een zonde om er niets van te weten.

In tegenstelling tot veel hacks voor dezelfde Opera, die ook door Safari worden verwerkt, heb ik de code enigszins gewijzigd en Opera 9.2, Opera 9.5 en Safari 3 zullen elk van hun CSS zien.

Ik heb een CSS-bestand gemaakt dat div's in de hoofdtekst van het document die overeenkomen met de browser toont of verbergt, zodat je gemakkelijk kunt volgen of alles in orde is met de hack.

Browser ( positie: absoluut; boven: px; rechts: px; z-index: 2; opvulling: 10px ) .browser div ( weergave: geen ) /* Alle gezonde browsers */ *:lang(ru) #lightMOD ( weergave: block ) /* Lastige selector - alle moderne browsers - niet IE6 of IE7 */ html>/**/body #lightMOD ( display: block ) /* Geïmplanteerd commentaar - alle moderne browsers - niet IE6 of IE7 */ /* IE * /* html #lightIE6 (weergave: blok) /* Loyaliteit parseren - werkt in IE6 en in de quirks-modus in IE7 */ *+html #lightIE7 (weergave: blok) body div.stopper (breedte: 100%; maximale breedte : 1100px; minimale breedte: 900px; *breedte: expressie(document.body.clientWidth > 1100? "1100px": document.body.clientWidth< 900? «900px»: «100%»); /* оверрайд одного свойства - в данном случае это эмуляция min- и max-width */ } /* FireFox */ @-moz-document url-prefix() { /* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */ #lightFF, x:-moz-any-link { display: block } /* главное - ошибиться в регистре, работает только для ID */ #lightFF2 { display: block } /* Firefox 3 имеет новый селектор:default. Алярм, без обрамления IE поймет эту конструкцию */ #lightFF3, x:-moz-any-link, x:default { display: block } } /* Opera 9.5 */ /* not после @media не обрабатывается ничем, кроме Opera 9.5 - видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */ @media not all and (-webkit-min-device-pixel-ratio) { #lightO95 { display: block } } /* Opera 9.2 */ /* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает - тоже рекомендуется быть внимательным */ @media all and (scan: progressive) { #lightO92 { display: block } } /* Safari */ /* Первая конструкция - против Opera 9.5, которая понимает вторую, а вторая - против Opera 9.2, которая понимает первую. Верх извратства 🙂 Вобщем-то veilig ontwerp, omdat 9.2 zal niet langer evolueren en zal uiteraard niet aankunnen: first-of-type, en -webkit- is een eigendomseigenschap en wordt nogal per ongeluk door Opera 9.2 verwerkt, wat voortvloeit uit het gebrek aan ondersteuning in 9.5 */ / * Safari begrijpt beide, dus de hack werkt */ @media all en (-webkit-min-device-pixel-ratio:0) ( body:first-of-type #lightSF3 ( display: block ) /* in plaats van:first -of-type je kunt ook gebruiken:nth-of-type(1) - het is voor Safari 3.1 */ )

Ik heb de code min of meer gemarkeerd...

Er zijn nog geen hacks voor IE8, of het zal echt goed zijn 😉 wat ik echter persoonlijk betwijfel... MS gaat de eigenschappen -ms- introduceren (ik heb er zelfs een gezien -ms-box- model met mijn eigen ogen). Over het algemeen is het pad correct - dergelijke "harken" zijn het veiligst.

Je kunt het in actie zien op http://test.dis.dj/css/ (aan de rechterkant staat een blok met de uitvoer waarvan hacks werkten).

Zoals terecht opgemerkt in de commentaren, zou het leuk zijn om de essentie van het probleem nader te beschrijven. Dus, wat zijn hacks en waarom bestaan ​​ze überhaupt, en wat zijn de risico’s van het gebruik ervan.

Alle hacks kunnen in verschillende categorieën worden onderverdeeld:

Kaki in pure vorm- gebruik van loyaliteit bij de verwerking CSS-regels browserparsers (bijvoorbeeld - *width voor IE)

Opzettelijke CSS-toevoegingen die een andere browser in principe niet zal begrijpen (vooral Mozilla-regels hier met de -moz- eigenschappen en het geweldige @-moz-document ding, waarmee je alleen regels voor Mozilla kunt schrijven zonder ergens bang voor te hoeven zijn)

Kenmerken van browserondersteuning voor CSS3-innovaties en soortgelijke innovaties. Wat IE6 betreft, het begrijpt niet eens een deel van CSS2 (bijvoorbeeld de kindselector E>F)

De eerste groep hacks leidt tot ongeldige CSS en is over het algemeen veilig te gebruiken. Het is niet nodig om foutieve code te verwerken, dus verstandige browsers hebben dergelijke dingen gemist en zullen dat blijven doen. Door ten minste, aangezien MS zelf de meeste hacks niet in de standaardmodus van zelfs IE 7 verwerkt, hoef je je geen zorgen te maken over hun (hacks) toekomst.

De tweede groep is misschien wel de meest veilige optie. Tenzij de ontwikkelaars plotseling besluiten hun eigen innovaties achterwege te laten.

De derde groep is het meest verraderlijke en ongewenste punt. CSS Media Query-constructies zijn de officiële CSS3 die alle browsers vroeg of laat zullen ondersteunen. Verschillende lastige selectors worden ook officieel aanbevolen. Daarom kan er een moment komen waarop een hack voor de ene browser ook door anderen wordt geïnterpreteerd. Een sprekend voorbeeld- Opera en Safari. Beide hebben gedeeltelijke ondersteuning en verschillen in kleine details, hoewel het mogelijk werd om de regels voor hen te scheiden. Soms worden er opzettelijk fouten of onnauwkeurigheden in de syntaxis in deze versie van semi-hacks geïntroduceerd (zoals het geval is met Opera 9.5). Dit zal je natuurlijk tot op zekere hoogte beschermen tegen nieuwe versies, maar het is nog steeds geen goede manier.

UPD. Hack voor IE8: /*/ #nav a (positie:relatief;) /**/

Goed slecht