Share
In deze zelfstudie zal ik twee benaderingen behandelen voor het detecteren of een browser bepaalde CSS-functies ondersteunt of niet. De eerste maakt gebruik van Modernizr, een populaire JavaScript-bibliotheek en de tweede functiequery's, een veelbelovende CSS-oplossing.
Dus laten we beginnen!
Zoals hierboven vermeld, is Modernizr een lichtgewicht JavaScript-bibliotheek die HTML5- en CSS3-functies in uw browser detecteert. Zolang uw pagina wordt geladen, wordt deze achter de schermen uitgevoerd en voert het functietests uit. Vervolgens worden de resultaten opgeslagen als eigenschappen van een JavaScript-object en als klassen van de html element. Daarover later meer.
Om Modernizr te installeren en te gebruiken, kunt u de site bezoeken en de gewenste versie downloaden.
Notitie: op het moment van schrijven is de huidige versie van Modernizr 2.8.3, hoewel versie 3 bijna klaar is. In feite verwacht het team achter de bibliotheek het in de komende weken te lanceren. Een kort overzicht van deze nieuwe versie is hier te vinden. Bovendien kunt u de bètaversie ervan nemen door deze link te bezoeken.
Na het downloaden plaatst u het JavaScript-bestand in uw project en neemt u het op in de van je html-pagina. Last but not least, om de functionaliteit van Modernizr mogelijk te maken, moet u de no-js klasse voor de html element.
In de volgende twee secties zal ik ingaan op de grondbeginselen van Modernizr. Lees voor meer geavanceerde concepten de documentatie.
Zoals hierboven besproken, voegt Modernizr een aantal klassen toe aan de html element. De klassenamen zijn afhankelijk van de browserondersteuning. Als de browser enkele functietests niet herkent, voegt Modernizr de Nee- voorvoegsel vóór de ingebouwde klassenamen. Stel dat we testen op de reflectie-effecten, de html element op Chrome 40 ziet er zo uit:
In Firefox 35:
Let ook op de js klasse. Wanneer Modernizr wordt uitgevoerd, in de veronderstelling dat JavaScript is ingeschakeld in onze browser, wordt het oude vervangen no-js klasse met de nieuwe.
Op basis van de resultaten van de tests van Modernizr, kunnen we onze stylesheets aanpassen.
Om te beginnen, hier is de eenvoudige HTML-code die we zullen gebruiken voor de rest van de tutorial:
CSS-reflecties
Met behulp van de lessen die Modernizr ons heeft gegeven, passen we de stijlen van de h2 element als volgt:
h2 color: # c0ccdb; lettergrootte: 3em; .cssreflections h2 -webkit-box-reflect: onder -.45em -webkit-gradiënt (lineair, linksboven, linksonder, van (transparant), kleur-stop (0%, transparant), naar (rgba (255, 255, 255, 0,75))); .no-cssreflections h2 text-shadow: 0 1px 0 # 136ed1, 0 2px 0 # 126ac9, 0 3px 0 # 1160b6, 0 4px 0 # 105cad, 0 5px 0 # 0f56a2, 0 6px 1px rgba (0,0, 0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2) , 0 5px 10px rgba (0,0,0, 0,25), 0 10px 10px rgba (0,0,0, .2), 0 20px 20px rgba (0,0,0, .15);
Webkit-gebaseerde browsers die reflecties ondersteunen zullen de h2 element als volgt:
Terwijl de rest van hen (althans degenen die de ondersteuning van schaduw tekst eigenschap) zal een ander effect toepassen, gebaseerd op een 3D-teksteffect van Mark Otto:
Hier is het voorbeeld op Codepen:
De tweede manier om de resultaten te controleren die door de tests van Modernizr zijn afgeleid, is via JavaScript. Zoals reeds vermeld, maakt Modernizr een object met de eigenschapnamen van functies die zijn geconfigureerd om te testen. Meestal keren ook hun waarden terug waar of vals.
De onderstaande schermafbeelding laat zien hoe Firefox 35 het Modernizr-object weergeeft (tabblad Console):
Zoals we kunnen zien Modernzir.cssreflections eigenschap retourneert a vals waarde. Dat gebeurt omdat Chrome, Safari en Opera de enige browsers zijn die reflecties ondersteunen (op het moment van schrijven).
Zo kunnen we het vorige voorbeeld reproduceren met JavaScript, door de reflectie en geen reflectie lessen voor onze handmatig:
Accentsconagua
var element = document.getElementById ('reflection'); if (Modernizr.cssreflections) element.className = 'reflection'; else element.className = 'geen reflectie'; Dan stylen met de relevante CSS:
.reflectie / * reflectievoorwaarde toepassen * / .no-reflection / * tekstschaduweigenschap toepassen * /
En de nieuwe demo op Codepen:
Zonder twijfel is Modernizr een waardevol hulpmiddel in het arsenaal van elke frontend ontwikkelaar. Maar zou het niet beter zijn als we de tests van Modernizr zouden repliceren met pure CSS? Gelukkig kunnen we dat doen door functiequery's te gebruiken. Dit zijn voorwaardelijke regels waarmee we verschillende stijlen kunnen toepassen, afhankelijk van de browserondersteuning. Ze werken net als mediaquery's. En ja, naast de CSS-versie komen ze ook naar JavaScript.
Klaar om te kijken?
Om functiequery's in onze CSS te definiëren, moeten we de @supports en @supports niet reglement. Hun syntaxis ziet er als volgt uit:
@supports (testvoorwaarde) / * regels toepassen * / @supports niet (testvoorwaarde) / * regels toepassen * /
De voorwaarde omvat eigendoms-waarde paar functies die we willen testen. Browsers die de functies ondersteunen, passen de doelregels toe, die we specificeren binnen de @supports regel. Anders zijn de stijlen binnen de @supports niet regel worden uitgevoerd.
De ... gebruiken EN en / of OF logische operators kunnen we complexe tests maken. Houd er echter rekening mee dat deze operators moeten worden gescheiden door haakjes.
Laten we twee voorbeelden bekijken. Zoals we al weten, is onze HTML doodeenvoudig! Het is gewoon een h2 element.
In dit eerste voorbeeld gebruiken we de Achtergrond kleur eigenschap om de achtergrondkleur van de te specificeren lichaam element. Om de dingen interessanter te maken, maken we ook een CSS-variabele. Browserondersteuning is onderverdeeld in de volgende categorieën:
Afhankelijk van deze omstandigheden, de lichaam element zal een ander tonen Achtergrond kleur.
Hier is de CSS-code op basis van de bovenstaande aannames:
body --bg-color: # 98FB98; achtergrondkleur: kaki; @supports (achtergrondkleur: var (- bg-kleur)) body background-color: var (- bg-color); @supports niet (achtergrondkleur: var (- bg-kleur)) body background-color: tomato;
Bijvoorbeeld op Safari, die tot de derde categorie behoort, zou ons element er als volgt uitzien:
Vervolgens behoort Chrome, dat de functieaanvraag kan interpreteren, maar geen CSS-variabelen ondersteunt, tot de tweede categorie:
Ten slotte Firefox, dat in de eerste categorie zit:
En het ingesloten voorbeeld op Codepen:
In dit geval breiden we de testconditie uit om een te bevatten tweede regel. Meer specifiek richten we ons nu op browsers die niet alleen reflecties ondersteunen, maar ook tekststreepeffecten.
Hier is de code voor dat gedrag:
@supports ((/ * reflectievoorwaarde * /) en (-webkit-tekst-streek: 1px-tomaat)) h2 / * reflectievoorwaarde toepassen * / -webkit-tekst-streek: 1px-tomaat; @supports niet ((/ * reflectievoorwaarden * /) en (/ * streekvoorwaarde * /)) h2 / * tekstschaduweigenschap toepassen * /
Bijvoorbeeld browsers (op het moment dat dit alleen Chrome 28+ schrijft) die functiequery's, reflecties en tekststreepeffecten ondersteunen, geven de h2 element als volgt:
Hieronder is het ingebedde voorbeeld op Codepen:
Feature-queries kunnen ook via JavaScript worden gedefinieerd. Om dit te doen, moeten we de CSS.supports methode. Hier zijn de mogelijke parameters:
CSS.supports (propertyName, propertyValue) CSS.supports (testvoorwaarde)
Het resultaat van deze methode is a Boolean waarde die aangeeft of de browser de functie (s) ondersteunt of niet. Ten slotte moeten we de parameters in enkele of dubbele aanhalingstekens plaatsen.
Met behulp van de JavaScript-editie van functiequery's kan ons laatste voorbeeld als volgt worden gereproduceerd:
var result = CSS.supports ('(/ * reflectievoorwaarde * /) en (/ * streekvoorwaarde * /)'); var element = document.getElementById ('reflection'); if (result) element.className = 'reflection'; else element.className = 'geen reflectie'; De bijbehorende demo:
In algemene termen is de browserondersteuning van functiequery's goed. Op het moment van schrijven ondersteunen Firefox (22+), Chrome (28+) en Opera (12.1+) alle deze CSS-functionaliteit. Hopelijk zullen toekomstige versies van IE de conditieregels begrijpen (ze werken er ook aan!).
Als u functiequery's in uw projecten wilt gebruiken, maar u bent een beetje sceptisch over de browsers die ze begrijpen, vindt u hieronder enkele handige polyfills:
In deze zelfstudie heb ik twee handige methoden doorgenomen die u kunt gebruiken om betrouwbare cross-browser-ervaringen te leveren. Door gebruik te maken van Modernizr en / of zoekopdrachten van functies kunt u de voordelen van ontwerpen begrijpen Kenmerken en niet voor browsers. Modernizr is de huidige stabiele oplossing, maar er zijn vraagvragen, dus de keuze is aan u!
