10 nützliche Fallback-Methoden für CSS und Javascript

Code-Fallbacks sind die perfekte Lösung, um mit Ihren vielen einzigartigen Besuchern Kompromisse einzugehen. Nicht jeder im Web verwendet dasselbe Betriebssystem, denselben Webbrowser oder sogar physische Hardware. All diese Faktoren bestimmen, wie Ihre Webseite tatsächlich auf dem Bildschirm dargestellt wird. Wenn Sie mit neuen CSS- oder JavaScript-Tricks arbeiten, stoßen Sie häufig auf solche technischen Fehler.

Aber lassen Sie sich nicht durch diese Fallstricke entmutigen! In dieser Anleitung habe ich einige zusammengestellt die häufigsten Fallback-Techniken für Webdesigner mit Fokus auf CSS und JavaScript / jQuery. Wenn alles andere fehlschlägt, möchten Sie den Benutzern zumindest grundlegende Seitenfunktionen bieten. Auf dem Gebiet des User Experience Design steht die Einfachheit im Vordergrund.

Sehen Sie sich unseren Leitfaden an und teilen Sie uns Ihre Gedanken und Fragen in den Kommentaren mit.

1. Abgerundete Ecken mit Bildern

CSS3-Techniken sind im Mainstream-Webdesign explodiert. Eine der bemerkenswertesten Eigenschaften ist Grenzradius das ermöglicht on-the-fly abgerundete Ecken. Diese sehen auf praktisch jedem Button, Div oder Textfeld schön aus. Das einzige Problem ist die eingeschränkte Unterstützung zwischen Webbrowsern.

Viele ältere Browser, einschließlich Internet Explorer 7, unterstützen diese Eigenschaft nicht. Damit abgerundete Ecken für alle Standard-Browser funktionieren, müssen Sie einen Fallback mit Bildern erstellen.

Der Standardcode verwendet reguläre CSS3-Eigenschaften für das Hauptdivit, während für Bilder an jeder Ecke Platz genommen wird. Sie müssen wahrscheinlich einige zusätzliche divs innerhalb des Hauptcontainers einrichten, die dazu verwendet werden, Eckbilder im Hintergrund anzuzeigen.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') keine Wiederholung oben links;  #mainbox .topc span background: url ('corner-tr.png') keine Wiederholung oben rechts;  #mainbox .btmc background: url ('corner-bl.png') keine Wiederholung unten links;  #mainbox .btmc span background: url ('corner-br.png') no-repeat unten rechts;  

Um sich vor Stress zu schützen, empfehle ich dringend, eine App wie RoundedCornr zu verwenden. Es ist eine In-Browser-Web-App, die CSS mit abgerundeten Ecken sowohl mit CSS3 als auch mit Bildern generiert. Dies ist besonders nützlich für Designer, die keinen Zugriff auf Grafiksoftware wie Photoshop oder GIMP haben.

2. jQuery Dropdown-Menüsystem

Dropdown-Menüsysteme sind perfekt für das heutige Web. Das größte Problem ist jedoch, dass Besucher auf Ihre Website zugreifen, ohne dass JavaScript aktiviert ist. In diesem Fall würde keines Ihrer Menüs funktionieren! Die beste Lösung ist die Verwendung von CSS, um die einzelnen Unterblöcke des Untermenüs anzuzeigen / auszublenden und im Hover anzuzeigen.

Das einzige Problem bei dieser Lösung besteht darin, dass Internet Explorer 6 diese CSS-Hover-Selektoren nicht unterstützt. IE7 + funktioniert jedoch hervorragend. und natürlich funktionieren alle Browser einwandfrei, wenn JavaScript überhaupt aktiviert ist. Der Code aus diesem Tutorial zu CSS Plus ist eine der besten Ressourcen, die ich gefunden habe. Es bietet nicht nur eine Lösung mit jQuery, sondern auch die für IE-Probleme erforderliche CSS.

/ * Eine Stromklasse wird über jQuery hinzugefügt. * / #Nav li.current> a background: # f7f7f7;  / * CSS Fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

Quelle

Eine andere alternative Lösung, die Sie ausprobieren können, ist die offene Anzeige aller Menüs im IE6. Mit bedingten Kommentaren von Internet Explorer können Sie Stylesheets basierend auf der Browserversion anwenden. Natürlich ist dies nicht die schönste Lösung, aber es funktioniert einfach.

Wenn Sie nicht der Meinung sind, dass Internet Explorer 6 eine große Sorge ist, sollten Sie sich nicht mit diesem alternativen Fallback beschäftigen. Das Tutorial und der nachfolgende Code oben sollten ausreichen, um Ihr JavaScript-Menü auch mit strengen CSS in allen gängigen Browsern laden zu können.

3. Zielgerichtete Internet Explorer-Stile

Ich bin mir sicher, dass wir alle über die Renderprobleme im Internet Explorer von Microsoft Bescheid wissen. Ich kann den neuesten IE8 und die Zukunftsaussichten mit IE9 ein wenig würdigen. Allerdings gibt es immer noch eine kleine Gruppe, die IE6 / IE7 verwendet, und Sie können sie noch nicht wirklich ignorieren.

(Bildquelle: github)

Bedingte Kommentare, wie im letzten Abschnitt erwähnt, können hilfreich sein, um Bereiche der Seite neu zu formatieren. Wenn Sie beispielsweise ein Dropdown-Menü mit einer Unter-Navigation im IE6 haben, das nur mit JavaScript angezeigt wird, haben Sie kein Glück, CSS als Fallback-Methode zu verwenden. Stattdessen ist es die beste Lösung, jede Unterliste als Navigationsblock anzuzeigen.

Durch Hinzufügen des obigen Codes zu Ihrem Dokumentkopf können Sie dann den Anzeigetyp für jede Unternavigation angeben. Das Beste an diesem Fallback ist, dass Sie das CSS überschreiben und dennoch Menüs dynamisch anzeigen / verbergen können, wenn JavaScript aktiviert ist. Ansonsten zeigen Sie nur eine offene Linkliste an. Sie könnten einen ähnlichen Code verwenden, den ich unten hinzugefügt habe.

#nav li position: relativ; Breite: 150px; / * muss eine endliche Breite für IE einstellen * / #nav li ul / * Sub-Nav-Codes * / display: block; Position: absolut; Breite: Auto; / * eigene Breite definieren oder im li-Element setzen * / #nav li ul li width: 100%;  

4. Alte IE-Deckkraft / Transparenz

Einer der vielen lästigen Fehler im Internet Explorer ist der Umgang mit Opazität. Die Alphatransparenz-Einstellungen in CSS3 können über die Opacity-Eigenschaft geändert werden. Microsoft unterstützt nur Microsoft Internet Explorer 9 derzeit diese Funktion.

Die beste Lösung für das Targeting von IE6 + ist "through" Filter, eine proprietäre Einstellung, die nur vom IE erkannt wird. Schauen Sie sich das folgende kurze Codebeispiel an:

.mydiv Opazität: 0,55; / * CSS3 * / filter: alpha (Deckkraft = 55); / * IE6 + * / 

Alles, was Sie tun müssen, ist, die Zeile oben in jedes Element einzufügen, das Transparenz erfordert. Beachten Sie, dass ähnlich der CSS3-Eigenschaft auch alle untergeordneten Elemente diese Änderung der Deckkraft übernehmen. Wenn Sie nach einer neueren Methode suchen, die speziell auf IE8 abzielt, lesen Sie den folgenden Code. Es verhält sich so, wie unsere Filtereigenschaft nur vom Microsoft IE8-Parser erkannt wird.

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

5. Erstellen von CSS3-Schaltflächen mit Fallback-Bildern

Schaltflächen sind ein fantastisches Webelement für alle Arten von Schnittstellen. Sie können sich wie Formulareingaben, Navigationselemente oder sogar direkte Seitenverknüpfungen verhalten. Mit CSS3 ist es jetzt möglich, Schaltflächen mit vielen einzigartigen Stilen wie Hintergrundverläufen, Boxschatten, abgerundeten Ecken usw. zu formatieren.

Sie können jedoch nicht darauf vertrauen, dass alle Besucher diese neueren Eigenschaften darstellen können. Beim Erstellen eines Fallback-Designs für Schaltflächen (oder sogar ähnliche Oberflächenelemente) gibt es zwei verschiedene Optionen. Die erste besteht darin, ein Hintergrundbild hinzuzufügen, das genauso gestaltet ist, wie das CSS aussehen würde. Dies kann leicht in Photoshop erreicht werden. Wenn Sie jedoch kein Experte für die Software sind, kann dies mühsam sein.

Die Alternative besteht darin, auf eine einfache Hintergrundfarbe und einfachere CSS-Stile zurückzugreifen. Ich verwende einige der Codebeispiele aus CSS-Tricks, einem guten Beitrag zu CSS3-Verläufen. Alle wichtigen Browser, einschließlich Safari, Firefox, Chrome und sogar Opera, unterstützen diese Eigenschaften. Der Bereich, in dem Sie auf Probleme stoßen, liegt in der Unterstützung von älteren Browsern: ältere Mozilla-Engines, IE6 / 7, möglicherweise sogar Mobile Safari.

.gradient-bg Hintergrundfarbe: # 1a82f7; / * verwendet im schlimmsten Fall eine durchgehende Farbe * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); Hintergrundbild: -Webkit-Gradient (linear, 0% 0%, 0% 100%, von (# 2F2727), bis (# 1a82f7)); Hintergrundbild: -webkit-linearer Gradient (oben, # 2F2727, # 1a82f7); Hintergrundbild: -moz-linearer Gradient (oben, # 2F2727, # 1a82f7); Hintergrundbild: -ms-linearer Gradient (oben, # 2F2727, # 1a82f7); Hintergrundbild: -o-linearer Gradient (oben, # 2F2727, # 1a82f7);  

Quelle

Das einzige kleine Problem bei der alleinigen Verwendung von Bildern als Fallback-Methode ist, dass sich der Status nicht ändert, wenn der Benutzer auf eine Schaltfläche klickt. Sie können zwei verschiedene Bilder für diesen regulären vs. aktiven Status erstellen, obwohl dies zusätzliche Arbeit erfordert. Allein aus diesem Grund müssen Sie möglicherweise anstelle von Ersatzbildern eine durchgehende Hintergrundfarbe verwenden. Probieren Sie verschiedene Lösungen aus, um herauszufinden, welche in Ihrem Layout am besten aussehen.

6. Auf mobile Inhalte prüfen

Ein weiterer großer Trend im Jahr 2012 ist die Beliebtheit des mobilen Internets. Smartphones sind überall und Daten über 3G / Wi-Fi werden immer zugänglicher. Viele Designer werden daher versuchen, ein Fallback-Layout für mobile Benutzer bereitzustellen.

Einige beliebte mobile Webbrowser rendern Seiten ähnlich einer Desktop-Umgebung. Mobile Safari und Opera sind dafür am besten bekannt und unterstützen sogar viele gängige jQuery-Skripts. Diese Seiten sind jedoch nicht immer mobilfreundlich und es gibt Raum für Erweiterungen bei UX.

Es gibt zwei Möglichkeiten, mobile Browser zu erkennen und ein alternatives Layout oder Stylesheet anzuzeigen. Der erste ist durch JavaScript, das sich hervorragend als Frontend-Tool eignet. Das Skript, das ich unten hinzugefügt habe, ist sehr einfach und prüft nur iPhone / iPod Touch-Benutzer. Detect Mobile Browser ist eine fantastische Website, die ein ausführlicheres Skript enthält, das Sie stattdessen ausführen können.

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

Jetzt ist die andere Alternative das Prüfen einer Backendsprache wie PHP. Sie können nach einer Variablen suchen, die als bekannt ist HTTP_USER_AGENT. Dutzende von Websites werden angezeigt, wenn Sie diese Bedingungen auf Google stellen. Ich empfehle jedoch immer noch den Link zum Erkennen von mobilen Browsern, den ich im vorherigen Absatz hinzugefügt habe.

Die Site bietet kostenlos herunterladbare Skripte zum Parsen nicht nur in PHP, sondern auch jede Menge anderer populärer Backendsprachen. Dazu gehören ASP.NET, ColdFusion, Rails, Perl, Python und sogar serverbasierter Code wie IIS und Apache.

7. Slicebox Slider mit anmutigem Fallback

Mein liebster CSS3-Freebie aus 2011 ist wahrscheinlich der von Codrops veröffentlichte Slicebox 3D Image Slider. Es verwendet wunderschöne CSS-Animationsübergänge in Browsern, die diese unterstützen, derzeit in Google Chrome und den neuesten Versionen in Safari. Es ist seltsam, dass selbst die neueste Version von Firefox oder IE9 diese Übergänge immer noch nicht verwenden kann.

Das Beste an diesem Code ist, dass es immer noch einen Fallback gibt, um grundlegende Übergangseffekte zwischen den Bildern bereitzustellen. Zugegebenermaßen wird ein Großteil der Animation über jQuery ausgeführt. Die standardmäßige CSS-Fallback-Option ist jedoch immer noch sehr zuverlässig, wenn man bedenkt, wie viele Browser auffällige CSS3-Animationen nicht unterstützen können.

Alternativ hat Codrops kürzlich ein weiteres Schiebebild-Panel veröffentlicht, das noch mehr kreative CSS3-Techniken verwendet. Dieser Bildschieberegler wird mithilfe von Hintergrundbildern in CSS erstellt und verhält sich daher auch ohne Übergangseffekte sehr flüssig.

8. jQuery Script CDN Failsafe-Methode

Die jQuery-Bibliothek ist für die Entwicklung von JavaScript im Web fast unverzichtbar geworden. Viele alternative CDN-Anbieter haben statische URLs erstellt, auf denen alle Release-Versionen von jQuery gehostet werden. Google, Microsoft und sogar jQuery selbst haben ein CDN-Portal für Entwickler erstellt, darunter auch einige weniger bekannte Websites.

Es gibt möglicherweise hunderttausende Entwickler, die auf diese Anbieter angewiesen sind. Was würde passieren, wenn einer der Links aus irgendeinem Grund unterbrochen wurde oder die Server offline gingen? Es ist eine gute Idee, eine lokale Kopie zu hosten und diese nur dann zu implementieren, wenn Sie sie benötigen. Mit diesem großartigen Fallback-Code-Snippet von CSS-Tricks können Sie genau das tun!

Quelle

9. Eindeutige HTML5-Checkboxen

HTML5 hat die Tür für ein paar coole Stile zum Erstellen von Websites geöffnet. Ein Teil dieses erweiterten Web-Erlebnisses besteht aus Formularen und Eingabeelementen. Checkboxen sind nur ein Beispiel, das stark an Ihre Bedürfnisse angepasst werden kann.

Ich bin auf dieses wundervolle CSS / jQuery-Tutorial gestoßen, das bereits im Frühjahr 2011 veröffentlicht wurde. Es bietet eine einfache Methode zum Erstellen von Switches im Apple-Stil für Ihre Checkboxen, die sich in älteren Browsern elegant abbauen. Der Code verwendet Hintergrundbilder, um die Ein / Aus-Stile zwischen Benutzerinteraktionen zu ersetzen.

Die ursprünglichen Elemente der Kontrollkästchen für die Eingabe sind standardmäßig ausgeblendet, und ihr Wert wird durch JavaScript-Aufrufe bestimmt. Dies bedeutet, dass Sie den Wert jederzeit über jQuery dynamisch abrufen können. Er wird jedoch auch in das Formular übernommen, wenn Sie auf das Symbol klicken “einreichen” Taste.

Unter der Annahme, dass JavaScript in älteren Browsern deaktiviert oder nicht unterstützt wird, verwendet das Skript standardmäßig HTML-Eingaben. Dadurch wird auch das CSS für die neueren Kontrollkästchen-Stile deaktiviert, sodass es so aussieht, als ob sich nichts geändert hat. Das Skript verhält sich eher wie ein ästhetischer Spitzenreiter mit einem sauberen Fallback als alles andere. Diese Schieberegler sehen jedoch fantastisch aus und dieselben Techniken können auch für andere Formulareingabefelder wie Auswahlmenüs und Optionsfelder verwendet werden.

10. HTML5-unterstütztes Video

Die neuen HTML5-Spezifikationen waren in vielen Bereichen sehr fortschrittlich. Sowohl Video- als auch Audioelemente haben die native Unterstützung für eine große Anzahl von Mediendateien verbessert. Es stellt sich jedoch heraus, dass zwischen den HTML5-unterstützten Browsern die Dateitypen nicht alle übereinstimmen.

Mozilla Firefox unterstützt im Allgemeinen .OGG-Video, das Sie als Konverter verwenden können. Google Chrome und Safari suchen nach .MP4- oder H.264-codierten .MOV-Dateien. Aufgrund dieser Unterschiede müssten Sie normalerweise berücksichtigen drei verschiedene Videoformate - die beiden oben genannten und ein .FLV-Fallback.

Glücklicherweise haben einige wirklich kluge Leute eine Bibliothek namens VideoJS zusammengestellt. Es ist ein extrem kleiner JavaScript-Build, der eine einzige Implementierung von Flash- und HTML5-Videos in einem Tag ermöglicht. Der Download ist kostenlos und Open Source. Entwickler können ebenfalls gerne dazu beitragen. Sowohl der Flash- als auch der HTML5-Videoplayer sind identisch, sodass alle Benutzer dieselbe Erfahrung machen. Sehen Sie sich das HTML5-Video-Einbettungscode-Beispiel an:

Quelle

Auf einer ähnlichen Route bietet das html5media-Projekt eine Methode zur Konsolidierung aller Streaming-Medien in einem Dateityp. Leider ist auch VideoJS nicht mit jedem Browser perfekt. Das html5media-Projekt hat versucht, die Inkompatibilitäten von Browsern zu umgehen, um jeden Videodateityp auf allen Plattformen zu unterstützen. Und es funktioniert eigentlich ganz gut!

Fazit

Ich hoffe, dass dieser Leitfaden mit nützlichen Fallback-Methoden für Webentwickler auf der ganzen Welt nützlich sein wird. Es kann schwierig sein, Websites zu erstellen, um sich an eine Vielzahl von Softwarespezifikationen anzupassen. Dies gilt insbesondere, wenn Sie mit vielen verschiedenen Sprachen wie CSS und JavaScript arbeiten.

Die Trends deuten jedoch darauf hin, dass wir uns im Webdesign einer unterstützenden Ära nähern. Nie zuvor wurden mehr Browser und Webstandards vereinbart, insbesondere in CSS3 und HTML5. Diese Techniken sind nur einige von vielen, die beim Erstellen von Websites, die mit Standards kompatibel sind, zu berücksichtigen sind. Als Webentwickler möchten Sie stets den neuesten Designtrends folgen und sich an Ihr Publikum anpassen.