Van de auteur: Het voorvoegsel -webkit- is tegenwoordig zo gebruikelijk in CSS dat sommige sites weigeren correct te werken zonder dit voorvoegsel. Hoewel css-voorvoegsels van leveranciers de afgelopen jaren een duidelijk teken zijn geweest van minder dan perfecte eigenschappen voor ontwikkelaars, heeft dit Mozilla ertoe gebracht een wanhopige maar noodzakelijke stap te zetten. In Firefox 46 of 47 (uitgebracht in april of mei 2016) is Mozilla van plan ondersteuning te introduceren voor een reeks niet-standaard –webkit- voorvoegsels om de browsercompatibiliteit met dat voorvoegsel te verbeteren (zelfs op mobiele apparaten).

Het idee is niet nieuw, Microsoft Edge ondersteunt ook verschillende -webkit- voorvoegsels voor compatibiliteit. Opera begon in 2012 de voorvoegsels -webkit- te ondersteunen en schakelde vervolgens over op de Webkit Blink-engine. W3C en browserontwikkelaars waren niet van plan dit voorvoegsel te gebruiken bij de ontwikkeling van websites:

“Het officiële W3C-beleid stelt dat experimentele eigenschappen niet mogen worden gebruikt in sitecode. Mensen gebruiken ze echter omdat ze willen dat hun sites de nieuwste technologie gebruiken en er cool uitzien."— W3C-pagina over het optimaliseren van inhoud voor verschillende browsers

Ontwikkelaars willen echter altijd zo snel mogelijk toegang hebben tot de nieuwste functies. Leveranciersvoorvoegsels hebben alles op zijn kop gezet en Webkit dominantie gegeven, maar ik geloof dat voorvoegsels een enorme impact hebben gehad op de snelle ontwikkeling van internet.

De methoden van Mozilla en Microsoft zullen de meeste sites alleen maar schade berokkenen. Op de meeste sites zijn de voorvoegsels –moz- al ingeschakeld, of ze zullen ontdekken dat Mozilla met de nieuwe update de nieuwe eigenschappen zal ondersteunen zonder dat er wijzigingen hoeven te worden aangebracht. Als professionele webontwikkelaars moeten we dit echter laten rusten en begrijpen dat sommige ontwerpen gemengde resultaten kunnen opleveren. Mogelijk weet u al welke van uw projecten door deze update zullen worden vernietigd. Webontwikkelaars, het is tijd om uw benadering van leveranciersvoorvoegsels te heroverwegen en deze op sites te testen.

Nieuwe voorvoegsels

Mozilla gaat een aantal –webkit-voorvoegsels toevoegen. Uit wat ik heb verzameld, lijkt het erop dat Mozilla niet van plan is zijn lijst te matchen met Edge-eigenschappen. Niet alle eigenschappen hoeven compatibel te zijn met de Mozilla-engine. Onder de voorvoegsels die Mozilla gaat toevoegen, te oordelen naar de wikipagina Compatibiliteit/Mobiel/Niet-standaardcompatibiliteit, zijn de volgende:

Webkit - voor verlopen

Webkit-transformeert

Webkit-overgangen

Webkit-uiterlijk

Webkit-achtergrondclip

Webkit-apparaat-pixelverhouding

Webkit-animatie

Sommige andere eigenschappen bevinden zich mogelijk in @-webkit-keyframes.

Testen in verschillende browsers zal van cruciaal belang zijn

Als u, een webontwikkelaar, het voorvoegsel -moz- niet heeft toegevoegd om nieuwe CSS-eigenschappen in Firefox niet te testen, en de deadline nadert, en de klant dwingt u dit voorvoegsel toe te voegen, dan zult u de site opnieuw moeten testen in Firefox 46 of 47. Deze versies komen in april of mei uit, je hebt dus nog even de tijd.

Om uw website te testen zonder op Firefox 46/47 te wachten, kunt u deze wijzigingen in Firefox Nightly inschakelen door layout.css.prefixes.webkit in about:config in te stellen. Als je de nieuwste versie van Nightly hebt geïnstalleerd, zou de standaardwaarde waar moeten zijn. Nog niet alle wijzigingen in het voorvoegsel -webkit- werken in Firefox Nightly, maar het is nog steeds een goede plek om te testen hoe uw site er binnenkort uit zal zien. Ik zou wachten tot maart voordat ik de site serieus test in Firefox Nightly.

Veel belangrijker is dat Microsoft Edge de voorvoegsels -webkit- al op een vergelijkbare manier interpreteert en weergeeft. Dit betekent dat alle WebKit-stijlen op uw site al worden weergegeven in een browser die totaal onverwacht was. Heeft u nog niet met deze browser gewerkt, installeer dan Windows 10 en krijg toegang tot testsites.

Leveranciersvoorvoegsels verdwijnen geleidelijk

Gelukkig verdwijnen de voorvoegsels van leveranciers geleidelijk naarmate ontwikkelingsteams nieuwe oplossingen vinden. Het Chrome/Blink-team heeft hun aanpak enigszins gewijzigd:

"In de toekomst zullen we, in plaats van standaard leveranciersvoorvoegsels in te schakelen, de reguliere eigenschappen achter de vlag 'enable experimentele webplatformeigenschappen' in about:flags behouden totdat die eigenschappen standaard zijn ingeschakeld."— Het Chrome/Blink-team

Het Firefox-team volgde een soortgelijk pad: “De belangrijkste werkrichting bij Mozilla is nu het afstappen van leveranciersvoorvoegsels, door ze uit te schakelen of over te zetten naar de status van reguliere eigenschappen als ze al stabiel zijn. Dit is in ieder geval ons algemene beleid; individuele gevallen verdienen uitzonderingen. »— Boris van Mozilla

Microsoft Edge richt zich ook op het verwijderen van ondersteuning voor voorvoegsels: “Microsoft probeert ook leveranciersvoorvoegsels in Edge te verwijderen. Dit betekent dat ontwikkelaars geen speciaal voorvoegsel voor de Edge-browser hoeven toe te voegen wanneer ze speciale HTML5-tags of CSS-eigenschappen gebruiken. In plaats daarvan zullen ontwikkelaars standaardcode schrijven."– Masheerbaar

Sierlijke degradatie met voorvoegsels werkt niet meer

Afstappen van leveranciersvoorvoegsels betekent maar één ding: de techniek van sierlijke degradatie door middel van voorvoegsels is niet langer een optie. Het isoleren van specifieke browsers door middel van leveranciersvoorvoegsels (bijvoorbeeld voor Chrome) was niet het doel van deze voorvoegsels; Ontwikkelaars zijn altijd aangemoedigd om alle voorvoegsels (–webkit- tot –o-) te gebruiken. Als u functionaliteit gebruikt die werkt op eigenschappen met leveranciersvoorvoegsels, en u ook de sierlijke degradatietechniek in uw ontwerp voor andere browsers hebt gebruikt, dan werkt dit niet meer.

Conclusie

De tijden veranderen. De dominantie van WebKit was onbedoeld en veroorzaakte commotie en incompatibiliteit op internet. Andere browsers proberen de compatibiliteit uit te breiden door –webkit- voorvoegsels toe te voegen. Geleidelijk aan, met het verdwijnen van leveranciersvoorvoegsels, zal dit probleem ook verdwijnen. Ontwikkelaars moeten controleren of het gebruik van voorvoegsels geen ongewenste gevolgen heeft in niet-WebKit-browsers.

Inhoudsopgave:

Het voorvoegsel -webkit- is zo dominant in CSS dat sommige sites zonder dit voorvoegsel niet goed werken. Dit geeft aan dat ontwikkelaars de afgelopen jaren de best practices niet hebben gevolgd en dit heeft geleid tot een ongelukkige, maar bijna gedwongen beslissing van Mozilla. In Firefox versie 46 of 47 (dit is april of mei 2016) is Mozilla van plan ondersteuning te implementeren voor niet-standaard -webkit- voorvoegsels om de compatibiliteit van Firefox te verbeteren met sites die actief gebruik maken van -webkit (meestal mobile-first sites).

Ontwikkelaars gebruiken echter voorvoegsels om zo snel mogelijk de nieuwste browserfuncties te gebruiken. Voorvoegsels veroorzaakten verwarring met de dominantie van WebKit, maar dwongen het internet ook om in een versneld tempo vooruit te gaan.

De aanpak van Mozilla en Microsoft is veilig voor de meeste sites. Veel sites zullen het voorvoegsel -moz- gebruiken of vereisen geen actie om compatibel te zijn met een toekomstige Firefox-update. Maar als professionele webontwikkelaars moeten we zorgvuldig overwegen en begrijpen welke gevolgen dit met zich meebrengt. U weet waarschijnlijk welke van uw sites mogelijk door deze update worden getroffen.

Het is dus tijd om de aanpak van voorvoegsels en testsites ermee te heroverwegen.

Ondersteunde voorvoegsels

Er zijn een aantal -webkit- voorvoegsels die Mozilla kan implementeren. Van wat ik heb verzameld, heeft Mozilla niet de neiging om de lijst met ondersteunde voorvoegseleigenschappen te matchen met die van Edge, omdat ze niet allemaal nodig zijn voor de compatibiliteit van de lay-outengine.

De Firefox-ontwikkelaars zijn ook dicht bij een soortgelijke aanpak:

De huidige trend in Mozilla is het vermijden van leveranciersvoorvoegsels door eigenschappen zonder voorvoegsel uit te schakelen en de versie zonder voorvoegsel met voldoende stabiliteit te gebruiken. Dit is een algemeen beleid: in sommige gevallen kunnen uitzonderingen van toepassing zijn - Boris van Mozilla

Microsoft Edge gaat ook de voorvoegsels van leveranciers opgeven:

“Microsoft gaat ook leveranciersvoorvoegsels in Edge elimineren. Dit betekent dat ontwikkelaars die specifieke HTML- en CSS-functies willen gebruiken, geen Edge-specifiek voorvoegsel zullen gebruiken. In plaats daarvan schrijven ze gewoon code volgens de standaarden” - Mashable

Er zal geen geleidelijke degradatie meer plaatsvinden op basis van voorvoegsels

Deze stap af van leveranciersvoorvoegsels betekent één ding: geleidelijke degradatie met behulp van leveranciersvoorvoegsels heeft geen perspectief.

Het was niet de bedoeling om voorvoegsels van leveranciers te gebruiken om stijlen toe te passen voor een specifieke browser (bijvoorbeeld alleen Chrome); De aanbeveling voor ontwikkelaars is altijd geweest om alle voorvoegsels te gebruiken (van -webkit- tot -o-). Als u functies gebruikt die afhankelijk zijn van voorvoegseleigenschappen en voorvoegsels gebruikt om uw ontwerp geleidelijk aan te verslechteren in andere browsers, dan werkt dit niet meer.

Conclusie

De tijden veranderen. De dominantie van WebKit heeft onbewust geleid tot incompatibiliteitsproblemen, waardoor andere browserleveranciers gedwongen werden om -webkit- voorvoegsels te implementeren. Dit probleem zal eindigen zodra browserleveranciers leveranciersvoorvoegsels geleidelijk afschaffen, maar in de tussentijd moeten ontwikkelaars ervoor zorgen dat voorvoegsels geen onverwachte resultaten veroorzaken in niet-WebKit-browsers.

De webontwerpindustrie verandert voortdurend, deels omdat webbrowsers en apparaten voortdurend veranderen. Omdat het werk dat we doen als webontwerpers en -ontwikkelaars via een webbrowser wordt bekeken, zal ons werk altijd een symbiotische relatie hebben met die software.

Wijzigingen in webbrowsers

Een van de uitdagingen waarmee websiteontwerpers en -ontwikkelaars altijd te maken hebben gehad, zijn niet alleen de veranderingen in webbrowsers, maar ook de reeks verschillende webbrowsers die zullen worden gebruikt om toegang te krijgen tot hun websites. Het zou geweldig zijn als alle websitebezoekers de nieuwste en beste software zouden gebruiken, maar dat is nooit het geval geweest (en zal waarschijnlijk ook nooit het geval zijn).

Sommige bezoekers van uw sites zullen webpagina's bekijken met zeer verouderde browsers en functies die ontbreken in modernere browsers. Oudere versies van de Internet Explorer-browser van Microsoft zijn bijvoorbeeld al lange tijd een probleem voor veel webprofessionals. Ook al heeft het bedrijf de ondersteuning voor enkele van zijn oudste browsers stopgezet, er zijn nog steeds mensen die deze zullen gebruiken - mensen met wie u misschien zaken wilt doen en waarmee u wilt communiceren.

Definitie van "sierlijke degradatie"

De realiteit is dat mensen die deze verouderde webbrowsers gebruiken vaak niet eens weten dat ze verouderde software hebben of dat hun online-ervaring in gevaar kan komen als gevolg van hun softwarekeuzes. Voor hen is deze verouderde browser gewoon wat ze al heel lang gebruiken om toegang te krijgen tot websites. Vanuit het perspectief van een webontwikkelaar willen we ervoor zorgen dat we deze klanten een lonende ervaring kunnen bieden en tegelijkertijd websites kunnen bouwen die uitstekend werken in de modernere, veelzijdige browsers en apparaten die tegenwoordig beschikbaar zijn.

Sierlijke degradatie is een strategie voor het omgaan met webpagina-ontwerp voor een verscheidenheid aan browsers, zowel oude als nieuwe.

Te beginnen met moderne browsers

De website is ontworpen om na verloop van tijd te verslechteren en is ontworpen met moderne browsers in gedachten. Deze site is ontworpen om te profiteren van de mogelijkheden van deze moderne webbrowsers, waarvan er vele automatisch worden bijgewerkt om ervoor te zorgen dat mensen altijd de nieuwste versie gebruiken. Websites die netjes degraderen, werken echter ook effectief in oudere browsers. Wanneer deze oudere, minder functionele browsers de site bekijken, zou deze moeten verslechteren terwijl deze nog steeds functioneel is, maar misschien met minder functies of andere visuele weergave-elementen. Hoewel dit concept van het aanbieden van een minder functionele of niet erg aantrekkelijke website u misschien vreemd lijkt, is de waarheid dat mensen niet eens zullen weten dat ze vermist worden. Ze zullen de site die ze zien niet vergelijken met de "betere versie", dus zolang de site doet wat ze nodig hebben en niet functioneel of visueel kapot lijkt te zijn, ben je in goede vorm.

Progressieve verbetering

Het concept van geleidelijke degradatie lijkt veel op een ander webontwerpconcept waar je misschien wel van hebt gehoord: progressieve verbetering. Het belangrijkste verschil tussen een progressieve verslechteringsstrategie en een progressieve verbeteringsstrategie is waar u uw ontwerp begint. Als u begint met de kleinste gemene deler en vervolgens functies voor modernere browsers aan uw webpagina's toevoegt, maakt u gebruik van progressieve verbetering. Als je begint met de meest moderne, geavanceerde functies en vervolgens schaalt, maak je misbruik van geleidelijke degradatie. Uiteindelijk zal de resulterende website waarschijnlijk dezelfde ervaring bieden, of u nu progressieve verbetering of geleidelijke degradatie gebruikt. Realistisch gezien is het punt van beide benaderingen het creëren van een site die uitstekend werkt voor moderne browsers, terwijl deze toch een naadloze ervaring biedt voor oudere webbrowsers en de klanten die deze blijven gebruiken.

Sierlijke degradatie betekent niet dat u tegen uw lezers zegt: "Download de nieuwste browser"

Een van de redenen waarom veel moderne ontwerpers niet van de sierlijke degradatiebenadering houden, is dat het er vaak toe leidt dat lezers de meest up-to-date browser moeten downloaden om de pagina te laten werken. Dit is geen sierlijke degradatie. Als je 'download browser X wilt schrijven om deze functie te laten werken', verlaat je het rijk van stapsgewijze verslechtering en ga je over op een browsergericht ontwerp. Ja, het is zeker nuttig om een ​​websitebezoeker te helpen upgraden naar een betere browser, maar het is een veelgestelde vraag (onthoud dat veel mensen niet begrijpen hoe ze nieuwe browsers moeten downloaden, en het kan ronduit intimiderend zijn om hen dit te vragen). ze weg). Als u echt wilt dat hun bedrijf hen vertelt dat zij uw site verlaten om betere software te downloaden, zal dat waarschijnlijk niet mogelijk zijn. Tenzij uw site belangrijke functionaliteit heeft waarvoor een specifieke browserversie of hoger vereist is, kan het forceren van downloads vaak de gebruikerservaring verstoren en moet dit worden vermeden.

Een goede vuistregel is om voor geleidelijke verslechtering dezelfde regels te volgen als voor progressieve verbetering:

• Schrijf geldige HTML die voldoet aan de standaarden
• Gebruik externe stylesheets voor uw ontwerp en lay-out
• Gebruik extern gekoppelde scripts voor interactiviteit
• Zorg ervoor dat inhoud zelfs toegankelijk is voor eenvoudige browsers zonder CSS of JavaScript

Met dit proces in gedachten kun je op pad gaan en het meest moderne ontwerp maken dat je maar kunt! Zorg ervoor dat het werkt in browsers met minder functies terwijl het nog steeds werkt.

Hoe ver terug moet je gaan?

Een vraag die veel webontwikkelaars hebben is hoe ver terug je browserversies moet ondersteunen. Er is geen precies en droog antwoord op deze vraag. Het hangt af van de site zelf. Als u naar de verkeersanalyses van een site kijkt, ziet u welke browsers worden gebruikt om die site te bezoeken. Als u ziet dat een aanzienlijk percentage van de mensen een bepaalde oudere browser gebruikt, wilt u die browser waarschijnlijk ondersteunen, anders riskeert u dat bedrijf kwijt te raken. Als u naar uw analyses kijkt en ziet dat niemand een oudere versie van de browser gebruikt, kunt u waarschijnlijk besluiten om die oudere browser niet volledig te ondersteunen en te testen. Het echte antwoord op de vraag hoe ver terug uw site ondersteuning nodig heeft, is dus: "Het maakt niet uit hoe ver uw analisten u vertellen wat uw klanten gebruiken."

Bewerkt door Jeremy Girard.

Natuurlijk bevat Internet Explorer een groot aantal fouten in verschillende versies, maar met behulp van voorwaardelijke opmerkingen kun je ze bestrijden en elimineren. Maar wat niets kan oplossen is dat IE hopeloos verouderd is. Terwijl andere browsers steeds meer CSS3-eigenschappen bevatten en verschillende nieuwerwetse technologieën ondersteunen, loopt IE voorop. De release van IE9 zal het probleem niet oplossen; eerdere versies zullen niet van de ene op de andere dag verdwijnen. In een dergelijke situatie zou de beste oplossing een sierlijke degradatie zijn: het principe van behoud van de prestaties terwijl een deel van de functionaliteit verloren gaat.

Laten we deze techniek eens bekijken met een klein voorbeeld, waarbij tekst wordt weergegeven in een blok en een knop. Het blok en de knop hebben afgeronde hoeken en er is ook een kleine schaduw aan het blok toegevoegd. Tot nu toe gebruiken browsers voor CSS3 voornamelijk specifieke eigenschappen met hun eigen voorvoegsels:

• Firefox - eigenschappen die beginnen met -moz-;
• Safari en Chrome - eigenschappen die beginnen met -webkit-;
• Opera - eigenschappen die beginnen met -o-.

Verschillende versies van deze browsers kunnen sommige eigenschappen zowel met als zonder voorvoegsel begrijpen, dus voor universaliteit voegen ze meerdere eigenschappen tegelijk toe. Om afgeronde hoeken te creëren hebben we dus de volgende stijl nodig.

Moz-grensradius: 10px; /* Voor Firefox */ -webkit-border-radius: 10px; /* Voor Safari en Chrome */ border-radius: 10px; /* Voor Opera en IE9 */

Hoewel het gebruik van deze eigenschappen zal resulteren in ongeldige CSS-code, is het in dit geval belangrijker om te werken in de browsers Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, evenals hun oudere versies. Voorbeeld 1 laat zien hoe u CSS3-eigenschappen gebruikt om schaduwen en afgeronde hoeken te maken.

Voorbeeld 1. Blok met schaduw

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Het resultaat van het voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Blokkeer de weergave in Safari

Hetzelfde voorbeeld in de IE8-browser en hieronder wordt getoond in Fig. 2.

Rijst. 2. Blokkeerweergave in IE8

Hoewel het uiterlijk van de elementen op details verschilt, blijft de functionaliteit van de pagina als geheel hetzelfde. Er kan op de knop worden geklikt, de tekst blijft hetzelfde, inclusief kleur en achtergrond, en er zijn geen weergavefouten. In feite zit het verschil alleen in de kleine dingen die eerder decoratieve dan praktische functies vervullen. Alle principes van sierlijke degradatie zijn vervuld.

Wat levert deze aanpak in de praktijk op?

• Hiermee kunt u actief decoratieve eigenschappen van CSS3 gebruiken, ongeacht de browser.
• Motiveert om verschillende CSS3-effecten te gebruiken.
• Het maakt het leven van de ontwikkelaar aanzienlijk eenvoudiger, omdat hij niet langer hoeft te zoeken naar oplossingen voor verouderde browsers.
• Versnelt de arbeidsproductiviteit.

Natuurlijk is sierlijke degradatie niet altijd van toepassing. Als de lay-outvereisten ondersteuning voor oudere versies aangeven, moet u op zoek gaan naar alternatieve oplossingen, bijvoorbeeld door afbeeldingen te gebruiken voor afgeronde hoeken. Maar voor het grootste deel worden eisen aan de lay-out gesteld zonder rekening te houden met de algemene situatie. En als we alle voordelen van sierlijke degradatie vergelijken met het nadeel, dat zich alleen manifesteert in het feit dat verouderde browsers, met name IE8, de pagina niet “mooi” genoeg weergeven, dan zullen de sympathieën aan de kant van de vooruitgang staan.