Analyse de la dégradation d'un site Web élégant basée sur les compétences du didacticiel Modernizr_html5

De nos jours, le contenu affiché sur une page web est de plus en plus abondant, incluant certains effets fonctionnels HTML5 et CSS3. Donc si le navigateur du client prend en charge HTML5. L'accès aux pages fonctionne très bien sans problème. Que se passe-t-il si HTML5 n'est pas pris en charge, ou s'agit-il d'IE6, 7, 8 et d'autres navigateurs ? Cette période est souvent un véritable casse-tête pour le personnel front-end, la compatibilité.

Compatible pour le moment. Il ne s’agit rien de plus que de permettre aux utilisateurs de le consulter et de l’utiliser de la manière la plus cohérente possible dans tous les navigateurs. Mais la page utilise des balises HTML5 et des styles CSS3. Que dois-je faire si le navigateur client ne prend pas en charge HTML5 ? Pour ce problème, nous ne pouvons en prendre en charge que autant que possible. Si vous ne pouvez pas le soutenir, veuillez donner des conseils et des suggestions amicaux. Permettez aux utilisateurs de passer à une version plus récente du navigateur. Par conséquent, pendant le processus de codage, nous devons effectuer des tests fonctionnels. Supposons que nous souhaitions créer un effet de coin arrondi. En utilisant CSS3, HTML5 est très pratique.

<style>
            article  
            {
               fond: bleu clair;
                marge: 20 px;
                rembourrage : 5px;                 
                largeur: 350px;
               rayon de bordure: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h1 { font-size : 12px; }
        style >
<article>
<en-tête><h1>Mon titreh1>en-tête>
 <p >Cet endroit est le contenup>
 article>

L'effet est le même que prévu

Que faire si le navigateur client ne prend pas en charge HTML5 ? Testons-le à l'aide de l'outil F12 d'IE

Remarque : le mode navigateur et le mode document doivent être sélectionnés

L'effet page est très cruel dans les navigateurs qui ne supportent pas HTML5

Nous devons résoudre ce problème. Il n'y a donc aucun moyen, davantage de travail doit être fait pour les navigateurs qui ne prennent pas en charge HTML5. Comment résoudre la compatibilité d’un tel effet de coin arrondi ? Il doit s'agir d'un jugement sur les navigateurs qui ne prennent pas en charge HTML5. Si les coins arrondis HTML5 ne sont pas pris en charge, nous utilisons des coins arrondis tiers pour le faire. Le problème revient ? Comment juger une telle fonction de coin arrondi ? A ce moment, il hésita encore. Existe-t-il un jugement de fonction js plus efficace, plus complet et plus concis pour HTML5 ?

http://modernizr.com/ Modernizr est un plug-in de détection de fonctionnalités HTML5.

Toujours l'effet coins arrondis du haut, légèrement modifié

Remarque : pie.js est un plug-in tiers aux coins arrondis

<script type="text/javascript" src="Scripts /modernizr-2.0.6.min.js">script>
        <style>
            article  
            {
                 fond :  bleu clair;
                marge: 20px;
 : 350px ;                rayon de bordure
 : 10px;                 boîte -ombre
: 4px 4px 10px rgba(0, 0, 0, 0.5);            
}            article h1 { font-size
 : 12px
; }        style>
        <article>
            <en-tête><h1>我的标题h1>en-tête>
            <p>我的内容p>
         article>
    <script>
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            complète : fonction () {
               si (! window.jQuery) {
                    Modernizr.load('Scripts/jquery-1.6.1.min.js');
                }
            }
         },
        {
             test : Modernizr.borderradius || Modernizr.boxshadow,
non : 'Scripts/PIE.js',
            rappel : fonction () {
$('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.