Dator Blog

Aujourd’hui je vous propose une liste des éléments non valide au W3C. Lorsque nous réalisons un site web, il est intéressant d’utiliser les éléments valides et non pas les éléments déprécié ou qui sont en prévu à être déprécié !

Attributs proposés à être déprécié :

body[background], table[background], td[background], th[background],
input[border], table[border]
table[cellpadding],
table[cellspacing],
object[codebase],
img[height], object[height], table[height],
a[name], form[name], img[name], object[name],
a[target], area[target],
td[valign], th[valign],
img[width], object[width], table[width]

Attributs dépréciés

applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align],
body[alink],
applet[alt],
applet[archive],
body[background],
body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor],
img[border], object[border],
br[clear],
applet[code],
applet[codebase],
basefont[color], font[color],
dir[compact], dl[compact], menu[compact], ol[compact], ul[compact],
basefont[face], font[face],
applet[height], td[height], th[height],
applet[hspace], img[hspace], object[hspace],
script[language],
body[link],
applet[name],
hr[noshade],
td[nowrap], th[nowrap],
applet[object],
isindex[prompt],
hr[size], font[size], basefont[size],
ol[start],
body[text],
li[type], ol[type], ul[type],
html[version],
body[vlink],
li[value],
applet[vspace], img[vspace], object[vspace],
hr[width], td[width], th[width], applet[width], pre[width]

Attributs ne faisant plus partie de la norme W3C

body[bgproperties],
*[bordercolor], *[bordercolordark], *[bordercolorlight],
body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin],
table[frame]

Éléments proposés à être dépréciés

input[type="button"], input[type="reset"], input[type="submit"], tt, big, small

Éléments dépréciés

applet, basefont, center, dir, font, isindex, menu, s, strike, u,
listing, plaintext, xmp

Eléments bannis du W3C

audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow

Eléments dépréciés à la validation W3C XHTML 1.0 Strict

a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name]

Interdictions de l'XHTML 1.0 Strict

a > a,
pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup,
button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex,
label > label,
form > form

Si tu as apprécié l'article, tu peux rejoindre le groupe sur Google Code !

• 7 commentaires

CSS Tricks nous avait proposé il y a un moment un sondage pour savoir quel framework CSS était le plus utilisé.

Les résultats révelent que plus de 50% des développeurs n’utilise pas de framework CSS, suivit par ceux qui ont leur propre framework CSS. On retrouve ensuite 960 Grid avec 11% et BluePrintCSS avec 10%.

Et toi tu utilises un framework CSS ?

• 0 commentaire

En me plongeant dans un fichier CSS je me suis trouver fasse à un certain problème : La bordure bleu sur les champs sur Safari.

Voici la petite astuce (très simple) :

.votrechamp {outline: 0 none; }

Et voila !

• 4 commentaires

Avec le nouveau système de commentaires de Wordpress, on a la possibilité de modifier entièrement le style CSS !

Chriss Harrison a lister tous les propriétés CSS modifiable pour personnaliser son thème Wordpress, voici cette liste :

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Ces 63 lignes permettent de modifier intégralement le templates CSS de vos commentaires.

• 4 commentaires

Il y a longtemps que je voulais faire un petit script permettant de changer le CSS de son site sans avoir a recharger la page.

Je me suis documenter sur Prototype pour savoir comment manipuler les DOMs et je suis arriver à un petit script … vraiment petit !

Déjà, il faut créer votre page HTML en pensant à bien ajouter prototype dans les javascript.

Ensuite il faut réaliser vos CSS afin de pouvoir changer les couleurs de vos sites comme vous voulez

et enfin il faut créer un petit bout de javascript (mais vraiment petit) mais qui possède une puissance assez conséquente !

Dans un premier temps, il faut identifier la premier css inclut dans votre site (le principal) :

$$('link[rel=stylesheet]')

avec ce code on peut recherche les DOMs avec les sélecteurs CSS, on va cherche les links qui ont un rel égale à stylesheet .

Ensuite on va transformer cette liste en tableau pour avoir la méthode qui permet de récupérer le premier élément de ce tableau (le CSS principal) :

$A($$('link[rel=stylesheet]')).first()

$A permet de transformer les éléments retourner en type Enumérable et de pouvoir chercher le premier élément avec la méthode first()

Enfin il nous suffit de changer l’attribut href de cet élément par le nouveau CSS

$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/monstyle.css');

Ici, avec setAttribute on change l’attribut href avec le deuxième paramètre

Finalement, on peut aussi créer une fonction très simple, afin de pouvoir spécifier dynamiquement le CSS comme ceci :

function change_css(style){
	$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/'+style+'.css');
}

Voici le résultat : Changer de CSS avec Javascript et Prototype démonstration
Avec ce mini bout de code, à vous les sites avec plusieurs styles !

• 2 commentaires

Parfois, on se demande pourquoi on a des marges sur des conteneurs CSS.

Pour régler ce problème il existe un fichier CSS nommé reset qui permet d’avoir une page complètement vierge en CSS.

Il suffit de créer un fichier CSS nommé reset.css et de mettre ces propriétés suivant :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Pour conclure, un reset CSS n’est pas une solution en soit dans la conception de ces CSS mais juste une petit plus dans le commencement de ses styles.

• 0 commentaire