loading
Au travers de cet article, nous vous proposons de récupérer et d’étudier un fichier reset.css pour vos projets HTML5, document adapté de celui d’Eric Meyers.
Et bien, pas mal de choses ! Les sections suivantes proposent les divers changements et ajustements appliqués.
Nous commençons par retirer tous les éléments obsolètes avec le passage en HTML5 tels que <acronym>, <center> et <big>. Nous avons de plus ajouté des éléments HTML5 manquants comme <and> afin de retirer tous les comportements par défaut de type padding, margin et borders.
Nous intégrons une propriété display :block pour les éléments nécessaires. Nous supprimons le reset de la pseudo-classe :focus de par le faible engagement des intégrateurs quant au stylage de cette propriété.
Nous ajoutons finalement nav ul {list-style:none;}
afin de supprimer les très ennuyeux bullet point proposés par défaut.
Pour des raisons d’accessibilité nous avons précisé des sélecteur d’attribut sur <abbr> et <dfn>, le style n’apparaitra alors qu’en cas de besoin.
<mark> est un nouvel élément disponible avec HTML5 permettant de marquer (!) un texte particulier d’un document. Selon le fichier de spec, il est dit : « L’élément <mark> permet de distinguer et de mettre en avant un texte à des fins de référence de par sa pertinence vis-à-vis d’un contexte tiers. »
Votre fichier reset.css se présentera comme suit :
/* Reset CSS HTML5 */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* Ajustez les couleurs en fonction de vos besoins */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* Ajustez les couleurs en fonction de vos besoins */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* Ajustez les couleurs en fonction de vos besoins */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }