So verwenden Sie progressive Verbesserung und elegante Verschlechterung in CSS3

Dieses Mal zeige ich Ihnen, wie Sie progressive Erweiterung und elegante Verschlechterung in CSS3 verwenden. Das Folgende ist ein praktischer Fall sehen. . Die Konzepte der progressiven Verbesserung und der eleganten Degradation wurden nach dem Aufkommen von CSS3 populär. Da Low-Level-Browser CSS3 nicht unterstützen, die Spezialeffekte von CSS3 aber zu gut sind, um darauf zu verzichten, wird CSS3 in High-Level-Browsern verwendet, während in Low-Level-Browsern nur die grundlegendsten Funktionen gewährleistet sind

. Der Zweck beider besteht darin, sich auf unterschiedliche Erfahrungen unter verschiedenen Browsern zu konzentrieren, ihr Fokus ist jedoch unterschiedlich, was zu unterschiedlichen Arbeitsabläufen führt.

Progressive Verbesserung: Erstellen Sie von Anfang an Seiten für Browser mit niedriger Version, um grundlegende Funktionen zu vervollständigen, und zielen Sie dann auf erweiterte Browser für Effekte, Interaktionen und zusätzliche Funktionen ab, um ein besseres Erlebnis zu erzielen.

Graceful Degradation: Erstellen Sie die Website von Anfang an voll funktionsfähig, testen Sie sie dann und beheben Sie sie für Browser. Sie erstellen beispielsweise zunächst eine Anwendung mit den Funktionen von CSS3 und hacken dann nach und nach die wichtigsten Browser, sodass sie auf Browsern niedrigerer Versionen normal durchsucht werden kann.

In der traditionellen Softwareentwicklung werden häufig die Konzepte der Aufwärtskompatibilität und Abwärtskompatibilität erwähnt. Eine progressive Verbesserung entspricht einer Aufwärtskompatibilität, während eine elegante Verschlechterung einer Abwärtskompatibilität entspricht. Abwärtskompatibilität bedeutet, dass höhere Versionen niedrigere Versionen unterstützen oder dass später entwickelte Versionen früher entwickelte Versionen unterstützen und mit diesen kompatibel sind. Die meiste Software ist abwärtskompatibel. Office2010 kann beispielsweise Word-Dateien öffnen, die von Office2007, Office2006, Office2005, Office2003 usw. erstellt wurden, Office2003 kann jedoch keine Word-Dateien öffnen, die von Office2007, Office2010 usw. erstellt wurden!

Der Unterschied zwischen den beiden:

Graceful Degradation und progressive Enhancement sind nur zwei Perspektiven auf dasselbe. Sowohl die Graceful Degradation als auch die Progressive Enhancement konzentrieren sich darauf, wie gut dieselbe Website in verschiedenen Browsern auf verschiedenen Geräten funktioniert. Der Hauptunterschied besteht darin, worauf jeder seine Aufmerksamkeit richtet und wie sich diese Aufmerksamkeit auf den Arbeitsfluss auswirkt.

Die Graceful-Degradation-Perspektive besagt, dass Websites für die fortschrittlichsten und umfassendsten Browser konzipiert werden sollten. Ordnen Sie das Testen von Browsern, die als „veraltet“ gelten oder fehlende Funktionen aufweisen, in der letzten Phase des Entwicklungszyklus an und beschränken Sie das Testen von

Objekten

auf gängige Browser (wie IE, Mozilla usw.) in der vorherigen Version . Unter diesem Designparadigma wurde davon ausgegangen, dass ältere Browser nur ein „schlechtes, aber passables“ Surferlebnis bieten. Sie können einige kleine Anpassungen vornehmen, um sie an einen bestimmten Browser anzupassen. Da sie jedoch nicht unser Fokus sind, außer der Behebung größerer Fehler, werden andere Unterschiede einfach ignoriert. Die Perspektive der progressiven Verbesserung geht davon aus, dass der Fokus auf dem Inhalt selbst liegen sollte. Beachten Sie den Unterschied: Ich habe das Wort „Browser“ nicht einmal erwähnt. Der Inhalt motiviert uns, eine Website zu erstellen. Einige Websites zeigen es an, andere sammeln es, einige suchen danach, einige betreiben es und einige Websites enthalten sogar alle oben genannten Informationen, aber das Gleiche ist, dass es sich bei allen um Inhalte handelt. Dies macht die progressive Verbesserung zu einem vernünftigeren Designparadigma. Aus diesem Grund wurde es sofort von Yahoo! übernommen und zum Aufbau seiner „Graded Browser Support“-Strategie verwendet.

Fallanalyse:

(1) Code

(2) Präfix CSS3 (-webkit-/-moz-/-o-*) und normales CSS3 Die Unterstützungssituation in Browsern ist wie folgt:

.transition { /*渐进增强写法*/
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
         transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

Vor langer Zeit: Der Browser unterstützte das Präfix CSS3 und das normale CSS3 nicht.

Vor nicht allzu langer Zeit: Der Browser unterstützte nur das Präfix CSS3 und tat dies nicht unterstützt normales CSS3 CSS3;

Jetzt: Browser unterstützen sowohl vorangestelltes CSS3 als auch normales CSS3;

In Zukunft: Browser unterstützen nicht vorangestelltes CSS3, sondern nur normales CSS3.

( 3) Die progressive Verbesserung ist so geschrieben, dass die Benutzerfreundlichkeit alter Browserversionen Vorrang hat und schließlich die Benutzerfreundlichkeit neuer Versionen berücksichtigt wird. Im Fall von Periode 3, wenn sowohl vorangestelltes CSS3 als auch normales CSS3 verfügbar sind, überschreibt normales CSS3 vorangestelltes CSS3. Die Art und Weise, ein ordnungsgemäßes Downgrade zu schreiben, besteht darin, der Verfügbarkeit der neuen Version des Browsers Priorität einzuräumen und schließlich die Verfügbarkeit der alten Version zu berücksichtigen. Im Fall von Periode 3, wenn sowohl vorangestelltes CSS3 als auch normales CSS3 verfügbar sind, überschreibt vorangestelltes CSS3 das normale CSS3.

Was CSS3 betrifft, bevorzuge ich die progressive Verbesserungsmethode. Da der Implementierungseffekt einiger

Attribute

des Präfixes CSS3 im Browser vom normalen CSS3-Implementierungseffekt abweichen kann, hat am Ende das normale CSS3 Vorrang. Wenn Sie neugierig sind, welche Eigenschaften genau unterschiedliche explizite Auswirkungen in CSS3 mit Präfix und normalem CSS3 haben? (4) So wählen Sie aus

Treffen Sie Ihre Entscheidung basierend auf der Version des Clients, die Ihre Benutzer verwenden. Bitte beachten Sie meinen Wortlaut: Ich verwende keinen Browser, sondern einen Client. Denn die Konzepte der progressiven Verbesserung und der eleganten Degradation sind im Wesentlichen Kompatibilitätsentscheidungen zwischen Software mit niedriger Version und Software mit hoher Version, die während des Softwareentwicklungsprozesses mit neuen Funktionen konfrontiert wird. Serverseitige Programme haben dieses Problem selten, da Entwickler die Version des serverseitig ausgeführten Programms steuern können, sodass kein Problem einer progressiven Verbesserung und einer ordnungsgemäßen Verschlechterung besteht. Das Client-Programm liegt jedoch außerhalb der Kontrolle des Entwicklers (Sie können Benutzer nicht zwingen, ihre Browser zu aktualisieren). Was wir Clients nennen, kann sich auf Browser, mobile Endgeräte (wie Mobiltelefone, Tablets, Smartwatches usw.) und ihre entsprechenden Anwendungen beziehen (Browser entsprechen Websites und mobile Endgeräte entsprechen entsprechenden APPs).

Mittlerweile gibt es eine sehr ausgereifte Technologie, mit der Sie den Anteil der verwendeten Versionen Ihres Client-Programms analysieren können. Wenn es viele Benutzer niedrigerer Versionen gibt, wird natürlich der Entwicklungsprozess der progressiven Verbesserung bevorzugt. Wenn es viele Benutzer höherer Versionen gibt, wird natürlich der Entwicklungsprozess Graceful verwendet, um die Benutzererfahrung für die meisten Benutzer zu verbessern Abbau wird bevorzugt.

Aber wie ist die tatsächliche Situation? Die überwiegende Mehrheit der großen Unternehmen verfolgt den Ansatz der progressiven Verbesserung, da das Geschäft an erster Stelle steht und die Verbesserung der Benutzererfahrung niemals an erster Stelle stehen wird. Zum Beispiel: das Update im Frontend der Sina Weibo-Website. Bei einer Website mit Hunderten Millionen Benutzern ist es absolut unmöglich, einen bestimmten Spezialeffekt zu erzielen, ohne zu berücksichtigen, ob er für Benutzer verfügbar ist Niedrigere Versionen müssen sicherstellen, dass die niedrige Version in die höhere Version übergeht und dann schrittweise verbessert wird, indem neue Funktionen verwendet werden, um den Benutzern höherer Versionen ein besseres Benutzererlebnis zu bieten. Aber es gibt keine Gegenbeispiele. Wenn Sie eine Software (oder Website) für Teenager entwickeln, wissen Sie, dass diese Gruppe von Menschen immer gerne neue Dinge ausprobiert, immer coole Spezialeffekte mag und ihre Software immer gerne auf die neueste Version aktualisiert (und im Gegensatz zu unserer älteren Generation). Benutzer). Angesichts dieser Situation ist der Entwicklungsprozess der progressiven Verbesserung die beste Wahl.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie einen Kreisanimationseffekt in HTML5

So verwenden Sie H5s WebGL in demselben Die Schnittstelle erstellt JSON- und Echarts-Diagramme

So verwenden Sie die neuen semantischen Tag-Funktionen von H5

Das obige ist der detaillierte Inhalt vonSo verwenden Sie progressive Verbesserung und elegante Verschlechterung in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!