Progressive Verbesserung und elegante Verschlechterung in CSS3

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 die Testobjekte auf die Vorgängerversion gängiger Browser (wie IE, Mozilla usw.). 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 im Mittelpunkt unserer Aufmerksamkeit stehen, werden andere Unterschiede außer der Behebung größerer Fehler 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

    .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;
    }

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

Vor langer Zeit: Weder das Browser-Präfix CSS3 noch normales CSS3 wird unterstützt;

Vor nicht allzu langer Zeit : Der Browser unterstützt nur Präfix-CSS3, nicht normales CSS3.

Jetzt: Der Browser unterstützt sowohl Präfix-CSS3 als auch normales CSS3 normales CSS3.

(3) Progressive Erweiterungsschreibmethode, die der Benutzerfreundlichkeit alter Browserversionen Vorrang einräumt und schließlich die Benutzerfreundlichkeit neuer Versionen berücksichtigt. In Situationen, in denen in Periode 3 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 sich der Implementierungseffekt einiger Eigenschaften des Präfix-CSS3 im Browser möglicherweise von dem des normalen CSS3 unterscheidet, wird sich am Ende das normale CSS3 durchsetzen. Wenn Sie neugierig sind, welche Eigenschaften in CSS3 mit Präfix und normalem CSS3 unterschiedliche explizite Auswirkungen haben.

(4) Auswahl

Treffen Sie eine Entscheidung basierend auf der von Ihren Benutzern verwendeten Version des Clients. 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. Beispiel: Bei der Aktualisierung des Frontends der Sina Weibo-Website ist es für eine Website mit Hunderten Millionen Benutzern absolut unmöglich, einen bestimmten Spezialeffekt zu erzielen, ohne zu berücksichtigen, ob er für Benutzer niedrigerer Versionen verfügbar ist Bei der progressiven Verbesserung werden neue Funktionen verwendet, um Benutzern mit höheren 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 tatsächlich die beste Wahl.

Der obige Inhalt ist eine Erklärung der progressiven Verbesserung und eleganten Verschlechterung in CSS3. Ich hoffe, dass er allen helfen kann.

Was ist der Unterschied zwischen progressiver Verbesserung und anmutiger Degradation?

Über progressive Verbesserung und anmutige Degradation_html/css_WEB-ITnose

Eine kurze Diskussion über die fortschreitende Verbesserung und den reibungslosen Abbau von Javascript_Javascript-Fähigkeiten

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