Analyse der Verschlechterung eleganter Websites basierend auf den Fertigkeiten des Modernizr_html5-Tutorials

Heutzutage wird der auf einer Webseite angezeigte Inhalt immer umfangreicher, einschließlich einiger funktionaler HTML5- und CSS3-Effekte. Wenn also der Browser des Clients HTML5 unterstützt. Der Seitenzugriff funktioniert sehr gut und ohne Probleme. Was ist, wenn HTML5 nicht unterstützt wird oder es IE6, 7, 8 und andere Browser sind? Dieses Mal bereitet einem Front-End-Personal oft große Kopfschmerzen, Kompatibilität.

Zurzeit kompatibel. Es geht nichts weiter darum, den Benutzern zu ermöglichen, es in allen Browsern so einheitlich wie möglich anzuzeigen und zu verwenden. Die Seite verwendet jedoch HTML5-Tags und CSS3-Stile. Was soll ich tun, wenn der Client-Browser HTML5 nicht unterstützt? Bei diesem Problem können wir nur so viel wie möglich unterstützen. Wenn Sie es nicht unterstützen können, geben Sie bitte freundliche Tipps und Vorschläge. Ermöglichen Sie Benutzern ein Upgrade auf eine neuere Version des Browsers. Daher müssen wir während des Codierungsprozesses einige Funktionstests durchführen. Angenommen, wir möchten einen abgerundeten Eckeneffekt erzielen. Die Verwendung von CSS3 und HTML5 ist sehr praktisch.

<Stil>
            Artikel  
            {
                Hintergrund: hellblau;
                Rand: 2 0px;
                padding: 5px;                        Breite
: 350px;                border-radius
: 10px;                 box-shadow
: 4px 4px 10px rgba(0, 0, 0, 0.5);            
}            article h1 
{ font-size: 12px; }        
Stil >
<Artikel><Kopfzeile><h1>Mein Titelh1>header>
 <p >Dieser Ort ist der Inhaltp>
 Artikel>

Der Effekt ist derselbe, den wir erwartet haben

Was passiert, wenn der Client-Browser HTML5 nicht unterstützt? Testen wir es mit dem F12-Tool des IE

Hinweis: Sowohl der Browsermodus als auch der Dokumentmodus müssen ausgewählt sein

Der Seiteneffekt ist in Browsern, die HTML5 nicht unterstützen, sehr grausam

Wir müssen dieses Problem beheben. Es gibt also keine Möglichkeit, für Browser, die HTMl5 nicht unterstützen, muss noch mehr Arbeit geleistet werden. Wie kann die Kompatibilität eines solchen abgerundeten Eckeneffekts gelöst werden? Es muss sich um ein Urteil über Browser handeln, die HTML5 nicht unterstützen. Wenn abgerundete HTML5-Ecken nicht unterstützt werden, verwenden wir dazu abgerundete Ecken-JS von Drittanbietern. Das Problem kommt wieder? Wie beurteilt man eine solche Funktion mit abgerundeten Ecken? Zu diesem Zeitpunkt zögerte er erneut. Gibt es eine effizientere, umfassendere und prägnantere Funktionsbeurteilung für HTML5?

http://modernizr.com/ Modernizr ist ein HTML5-Feature-Erkennungs-Plug-in.

Immer noch der obere abgerundete Eckeneffekt, leicht modifiziert

Hinweis: pie.js ist ein Plug-in mit abgerundeten Ecken eines Drittanbieters

<Skript Typ="text/javascript" src="Skripte /modernizr-2.0.6.min.js">script>
        <Stil>
            Artikel   
            🎜>:  hellblau
;                Rand: 20px
;                padding: 5px
;                                width: 350px
;>              -shadow: 4px 4px 10px rgba(0, 0, 0, 0.5)
;             }            article h1 
{ font-size: 12px
; }
        Stil>
        <Artikel>
            <header><h1>我的标题h1>header>
            <p>我的内容p>
         Artikel>
    <Skript>
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            vollständig: Funktion () {
                if (! window.jQuery) {
                    Modernizr.load('Scripts/jquery-1.6.1.min.js');
                }
             🎜>
 Modernizr.boxshadow,
nein: 
'Scripts/PIE.js
',            callback: function () {$('article').each(fonction () {
           PIE.attach(this);
                                   🎜> 

script>

Voyons l'effet : navigateur prenant en charge HTML5

Ensuite, IE7, un navigateur qui ne prend pas en charge HTML5, sera testé

Il est donc très pratique d'utiliser Modernizr pour effectuer la détection des fonctions des pages HTML5. Mais il y a toujours un problème ? Si vous créez un effet spécial sur une toile riche, comment la rendre compatible ? À ce stade, revenons à la phrase du début, la fonction est rétrogradée, prend en charge autant qu'elle peut prendre en charge et donne des conseils amicaux si elle ne peut pas être prise en charge. Nous espérons toujours que les utilisateurs nationaux passeront bientôt à des navigateurs prenant en charge HTML5, afin que les développeurs n'aient pas autant de peine.