10 nuttige fallback-methoden voor CSS en Javascript

Code-fallbacks zijn de perfecte oplossing om compromissen te sluiten met uw vele unieke bezoekers. Niet iedereen op het web gebruikt hetzelfde besturingssysteem, een webbrowser of zelfs fysieke hardware. Al deze factoren spelen een rol bij de weergave van uw webpagina op het scherm. Bij het werken met nieuwe CSS- of JavaScript-trucs kom je vaak technische bugs tegen.

Maar laat deze valkuilen je niet ontmoedigen! In deze gids heb ik enkele van de meest voorkomende fallback-technieken voor webontwerpers die zich richten op CSS en JavaScript / jQuery. Wanneer al het andere faalt, wilt u gebruikers op zijn minst basispaginafunctionaliteit bieden. Eenvoud heerst op het gebied van user experience design.

Bekijk onze onderstaande gids en laat ons uw gedachten en vragen weten in de commentarensectie.

1. Afgeronde hoeken met afbeeldingen

CSS3-technieken zijn omhoog geschoten naar het reguliere webontwerp. Een van de meest opvallende eigenschappen is border-radius waarmee rondlopende hoeken worden gemaakt. Deze zien er mooi uit in vrijwel elk knop-, div- of tekstvak. Het enige probleem is de beperkte ondersteuning tussen webbrowsers.

Veel oudere browsers, waaronder Internet Explorer 7, ondersteunen deze eigenschap niet. Dus om afgeronde hoeken voor alle standaardbrowsers te houden, moet u een fallback met afbeeldingen maken.

De standaardcode maakt gebruik van normale CSS3-eigenschappen op de hoofd-div, terwijl er rekening wordt gehouden met afbeeldingen op elk van de hoeken. U moet waarschijnlijk een aantal extra divs instellen in de hoofdcontainer die worden gebruikt om hoekafbeeldingen op de achtergrond weer te geven.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / grensradius: 5 px;  #mainbox .topc background: url ('corner-tl.png') no-repeat links bovenaan;  #mainbox .topc span background: url ('corner-tr.png') no-repeat rechtsboven;  #mainbox .btmc background: url ('corner-bl.png') no-repeat onderkant links;  #mainbox .btmc span background: url ('corner-br.png') no-repeat rechtsonder;  

Om jezelf te beschermen tegen stress, raad ik je ten zeerste aan om een ​​app als RoundedCornr te gebruiken. Het is een in-browser web-app die CSS met afgeronde hoeken genereert met zowel CSS3 als afbeeldingen. Dit is met name handig voor ontwerpers die geen toegang hebben tot grafische software zoals Photoshop of GIMP.

2. jQuery Dropdown menusysteem

Dropdown menusystemen zijn perfect voor het internet van vandaag. Het grootste probleem is echter dat bezoekers uw website bezoeken zonder JavaScript ingeschakeld te hebben. In dit geval zou geen enkele van uw menu's werken! De beste oplossing is om CSS te gebruiken om elk van de submenu div-blokken weer te geven / te verbergen en ze in hover weer te geven.

Het enige probleem met deze oplossing is dat Internet Explorer 6 deze CSS hover selectors niet ondersteunt. IE7 + werkt echter prima; en natuurlijk werken alle browsers goed als JavaScript in de eerste plaats is ingeschakeld. De code van deze tutorial over CSS Plus is een van de beste bronnen die ik heb gevonden. Het biedt niet alleen een oplossing met jQuery, maar ook de CSS die nodig is voor IE-problemen.

/ * Een klasse van stroom zal worden toegevoegd via jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Bron

Een andere alternatieve oplossing die u kunt proberen, is gewoon openlijk elk van de menu's in IE6 weergeven. U kunt voorwaardelijke opmerkingen van Internet Explorer gebruiken om stijlbladen toe te passen op basis van de browserversie. Dit is natuurlijk niet de mooiste oplossing, maar het werkt gewoon.

Als je niet het gevoel hebt dat Internet Explorer 6 een grote zorg is, neem dan niet eens de moeite met deze alternatieve fallback. De tutorial en de daaropvolgende code hierboven zou genoeg moeten zijn om je JavaScript-menu te laden, zelfs met strikte CSS in alle belangrijke browsers.

3. Gerichte Internet Explorer-stijlen

Ik weet zeker dat we allemaal op de hoogte zijn van de renderingproblemen die voortkomen uit Microsoft's Internet Explorer. Ik kan een beetje krediet geven voor hun nieuwste IE8 en toekomstige vooruitzichten met IE9. Er is echter nog steeds een kleine doelgroep met IE6 / IE7 en je kunt ze echt nog niet negeren.

(Afbeeldingsbron: github)

Voorwaardelijke opmerkingen zoals vermeld in het laatste gedeelte kunnen nuttig zijn voor het opnieuw formatteren van delen van de pagina. Als je bijvoorbeeld een vervolgkeuzemenu met subnavigatie in IE6 hebt dat alleen wordt weergegeven met JavaScript, heb je pech om CSS te proberen als een terugvalmethode. In plaats daarvan is de beste oplossing om elke sublijst als een navigatieblok weer te geven.

Als u de bovenstaande code aan uw documentkoptekst toevoegt, kunt u vervolgens het weergavetype voor elke subnavigatie opgeven. Het beste van deze fallback is dat je de CSS kunt overschrijven en toch dynamisch menu's kunt tonen / verbergen wanneer JavaScript is ingeschakeld. Anders geeft u gewoon een open lijst met links weer. Je zou een soortgelijke code kunnen gebruiken zoals ik hieronder heb toegevoegd.

#nav li positie: relatief; breedte: 150 px; / * moet een eindige breedte instellen voor IE * / #navli ul / * sub-nav codes * / display: block; positie: absoluut; breedte: auto; / * definieer uw eigen breedte of stel in het li-element * / #nav li ul li width: 100%;  

4. Legacy IE Dekking / Transparantie

Een van de vele vervelende bugs met Internet Explorer is de omgang met dekking. De alpha-transparantie-instellingen in CSS3 kunnen worden gewijzigd via de eigenschap opacity. Maar op de manier van Microsoft ondersteunt alleen Internet Explorer 9 deze functie momenteel.

De beste oplossing voor het richten van IE6 + is beschikbaar filter, een eigen instelling die alleen door IE wordt herkend. Bekijk het voorbeeld van de korte code hieronder:

.mydiv opacity: 0.55; / * CSS3 * / filter: alpha (dekking = 55); / * IE6 + * / 

Het enige dat u hoeft te doen, is de bovenstaande regel opnemen in elk element dat transparantie vereist. Merk op dat vergelijkbaar met de CSS3-eigenschap, alle onderliggende elementen ook deze verandering in opaciteit erven. Als u op zoek bent naar een nieuwere methode die IE8 specifiek target, bekijk dan de onderstaande code. Het gedraagt ​​zich op dezelfde manier als onze filtereigenschap alleen wordt herkend door de Microsoft IE8-parser.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (onacity = 55)"; / * IE8 * / 

5. CSS3-knoppen met fallback-afbeeldingen maken

Knoppen zijn een fantastisch webelement voor allerlei soorten interfaces. Ze kunnen zich gedragen als formulierinvoer, navigatie-items of zelfs directe paginakoppelingen. Met CSS3 is het nu mogelijk om knoppen te formatteren met veel unieke stijlen, zoals achtergrondgradiënten, doosschaduwen, afgeronde hoeken, enz.

U kunt er echter niet op vertrouwen dat al uw bezoekers deze nieuwere eigenschappen kunnen weergeven. Bij het bouwen van een fallback-ontwerp voor knoppen (of zelfs vergelijkbare UI-elementen) zijn er twee verschillende opties. De eerste is om een ​​achtergrondafbeelding op te nemen die exact zo is ontworpen als de CSS eruit zou zien. Dit kan eenvoudig worden bereikt in Photoshop. Als u echter geen expert in de software bent, kan dit lastig zijn.

Het alternatief is om terug te vallen op een gewone achtergrondkleur en eenvoudiger CSS-stijlen. Ik gebruik enkele van de codevoorbeelden van CSS-Tricks geweldige post op CSS3-gradiënten. Alle belangrijke browsers, waaronder Safari, Firefox, Chrome en zelfs Opera ondersteunen deze eigenschappen. Het gebied waar u problemen tegenkomt, is de ondersteuning van oudere browsers: oudere Mozilla-engines, IE6 / 7, mogelijk zelfs mobiele Safari.

.gradient-bg background-colour: # 1a82f7; / * gebruikt in het slechtste geval een effen * / achtergrondafbeelding: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# 2F2727), tot (# 1a82f7)); achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # 2F2727, # 1a82f7); achtergrondafbeelding: -moz-linear-gradient (bovenaan, # 2F2727, # 1a82f7); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 2F2727, # 1a82f7); achtergrondafbeelding: -o-lineaire gradiënt (bovenaan, # 2F2727, # 1a82f7);  

Bron

Het enige kleine probleem met alleen het gebruik van afbeeldingen als terugvalmethode is dat u geen actieve statuswijziging zult hebben wanneer de gebruiker op een knop klikt. Je zou twee verschillende afbeeldingen kunnen maken voor deze normale versus actieve staten, hoewel het wat extra werk zou vergen. Alleen al deze reden kan u ertoe aanzetten om een ​​effen achtergrondkleur te gebruiken in plaats van fallback-afbeeldingen. Probeer een aantal verschillende oplossingen uit om te zien welke het beste in uw lay-out passen.

6. Zoeken naar mobiele inhoud

Een andere enorme trend in 2012 is de populariteit van mobiel internetten. Smartphones zijn overal en gegevens via 3G / Wi-Fi worden steeds toegankelijker. Veel ontwerpers zullen dus op zoek zijn naar een uitwijk lay-out voor mobiele gebruikers.

Een aantal populaire mobiele webbrowsers zullen pagina's weergeven die lijken op een desktopomgeving. Mobile Safari en Opera zijn het meest bekend en ondersteunen zelfs veel veelgebruikte jQuery-scripts. Maar deze pagina's zijn niet altijd mobielvriendelijk en er is ruimte om uit te breiden op UX.

Er zijn twee manieren om mobiele browsers te detecteren en een alternatieve lay-out of stylesheet weer te geven. De eerste is via JavaScript, die prima werkt als een frontend-tool. Het script dat ik hieronder heb toegevoegd is heel eenvoudig en controleert alleen voor iPhone / iPod Touch-gebruikers. Detect Mobile Browsers is een fantastische website die een meer gedetailleerd script biedt dat u kunt uitvoeren.

// Omleiding iPhone / iPod Touch-functie isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.uwdomein.com";  

Nu is het andere alternatief het controleren van een backend-taal zoals PHP. U kunt controleren op een variabele die bekend staat als de HTTP_USER_AGENT. Tientallen websites verschijnen als u deze voorwaarden google. Ik raad echter nog steeds de link Detect Mobile Browsers aan die ik in de vorige alinea heb toegevoegd.

De site heeft gratis downloadbare scripts voor het parseren, niet alleen in PHP, maar ook tal van andere populaire backend-talen. Deze omvatten ASP.NET, ColdFusion, Rails, Perl, Python en zelfs server-gebaseerde code zoals IIS en Apache.

7. Slicebox-schuifregelaar met sierlijke fallback

Mijn favoriete CSS3-freebie uit 2011 moet waarschijnlijk de Slicebox 3D Image Slider zijn die is uitgebracht door Codrops. Het maakt gebruik van prachtige CSS-animatie-overgangen in browsers die deze ondersteunen, momenteel in Google Chrome en de nieuwste in Safari. Het is raar dat zelfs de meest recente versie van Firefox of IE9 deze overgangen nog steeds niet kan gebruiken.

Het beste deel van deze code is dat deze nog steeds terugvalt om elementaire overgangseffecten tussen de afbeeldingen te bieden. Veel van de animatie wordt uitgevoerd via jQuery, maar de standaard CSS-fallbackoptie is nog steeds erg betrouwbaar gezien hoeveel browsers geen flitsende CSS3-animaties kunnen ondersteunen.

Als alternatief heeft Codrops onlangs nog een ander deelvenster met glijdende afbeeldingen uitgebracht, dat nog creatievere CSS3-technieken gebruikt. Deze afbeeldingsschuiver wordt gemaakt met achtergrondafbeeldingen in CSS, dus zelfs zonder de overgangseffecten gedraagt ​​deze zich heel soepel.

8. jQuery Script CDN Failsafe-methode

De jQuery-bibliotheek is bijna essentieel geworden voor het ontwikkelen van JavaScript op internet. Veel alternatieve CDN-leveranciers hebben statische URL's gemaakt waar ze alle releaseversies van jQuery hosten. Google, Microsoft en zelfs jQuery hebben zelf een CDN-portal gemaakt voor ontwikkelaars, naast een paar andere minder bekende websites.

Er zijn mogelijk honderdduizenden ontwikkelaars die afhankelijk zijn van deze providers. Wat zou er gebeuren als een van de links om welke reden dan ook werd verbroken of de servers offline gingen? Het is een goed idee om een ​​lokale kopie te hosten en deze alleen te implementeren als u deze nodig hebt. Welnu, met dit geweldige fallback-codefragment van CSS-Tricks kun je precies dat doen!

Bron

9. Unieke HTML5-selectievakjes

HTML5 heeft de deur geopend voor een aantal frisse, coole stijlen om websites te bouwen. Een deel van deze verbeterde webervaring is door middel van formulieren en invoerelementen. Selectievakjes zijn slechts één voorbeeld dat sterk kan worden aangepast aan uw behoeften.

Ik heb deze geweldige CSS / jQuery-zelfstudie tegen het voorjaar van 2011 tegen het lijf gelopen. Deze biedt een eenvoudige methode om schakelaars in Apple-stijl te maken voor je selectievakjes die gracieus verslechteren in oudere browsers. De code gebruikt achtergrondafbeeldingen om de aan / uit-stijlen tussen gebruikersinteracties te vervangen.

De selectievakjes voor de oorspronkelijke invoer zijn standaard verborgen en hun waarde wordt bepaald door JavaScript-aanroepen. Dit betekent dat je de waarde op elk gewenst moment dynamisch kunt tillen met jQuery, maar het zal ook worden doorgegeven in de vorm na het raken van de “voorleggen” knop.

Ervan uitgaande dat JavaScript is uitgeschakeld of niet wordt ondersteund in oudere browsers, wordt standaard gebruikgemaakt van HTML-invoer. Hierdoor wordt ook de CSS uitgeschakeld voor de nieuwere checkboxstijlen, zodat het lijkt alsof er niets is veranderd. Het script gedraagt ​​zich meer als een esthetische front-runner met een schone fallback dan iets anders. Maar deze schuifregelaars zien er fantastisch uit en dezelfde technieken kunnen worden toegepast op andere formulierinvoervelden, zoals menu's en keuzerondjes.

10. HTML5 Ondersteunde video

De nieuwe HTML5-specificaties zijn op veel gebieden erg vooruitstrevend geweest. Zowel video- als audio-elementen hebben verbeterde native-ondersteuning voor een groot aantal mediabestanden. Het blijkt echter dat tussen de HTML5-ondersteunde browsers ze het niet allemaal eens zijn over bestandstypes.

Mozilla Firefox ondersteunt over het algemeen .OGG-video die u VLC als een converter kunt gebruiken. Google Chrome & Safari zoeken naar .MP4 of H.264 gecodeerde .MOV-bestanden. Vanwege deze verschillen zou je normaal gesproken moeten opnemen drie verschillende video-indelingen - de twee hierboven vermeld samen met een .FLV fallback.

Gelukkig hebben een paar hele slimme jongens een bibliotheek met de naam VideoJS samengesteld. Het is een extreem kleine JavaScript-build waarmee één Flash- en HTML5-video in één tag kan worden geïmplementeerd. Het is gratis te downloaden en open source, dus ontwikkelaars zijn ook welkom om een ​​bijdrage te leveren. Zowel de Flash- als HTML5-videospelers zijn op dezelfde manier aangepast zodat alle gebruikers dezelfde ervaring hebben. Bekijk hun HTML5-video-insluitcode-voorbeeld:

Bron

Na een vergelijkbare route biedt het html5media-project een methode voor het consolideren van alle streamingmedia tot één bestandstype. Helaas is zelfs VideoJS niet perfect in elke browser. Wat het html5media-project heeft geprobeerd te doen, is de compatibiliteit van browsers om elk type videobestand tussen alle platforms te ondersteunen. En het werkt eigenlijk best goed!

Conclusie

Ik hoop dat deze handleiding met nuttige fallback-methoden van pas zal komen voor webontwikkelaars over de hele wereld. Het kan moeilijk zijn websites te bouwen om zich aan te passen aan een breed scala aan softwarespecificaties. Dit geldt vooral als u met veel verschillende talen werkt, zoals CSS en JavaScript.

Maar trends wijzen erop dat we een meer ondersteunend tijdperk naderen in webdesign. Nooit eerder zijn er meer browsers en webstandaarden overeengekomen, vooral binnen CSS3 & HTML5. Deze technieken zijn slechts enkele van de vele die in overweging moeten worden genomen bij het bouwen van webpagina's die aan de standaarden voldoen. Als webontwikkelaar wil je constant de nieuwste designtrends volgen en je aanpassen aan de wensen van je publiek.