{"id":401,"date":"2008-11-18T08:05:12","date_gmt":"2008-11-18T07:05:12","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=401"},"modified":"2008-11-18T08:05:12","modified_gmt":"2008-11-18T07:05:12","slug":"decouvrez-la-pseudo-class-target","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/decouvrez-la-pseudo-class-target\/","title":{"rendered":"D\u00e9couvrez la pseudo class :target"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

<\/a>Comme chaque ann\u00e9e plus ou moins \u00e0 la m\u00eame p\u00e9riode, je change\/fais \u00e9voluer le th\u00e8me de mon site. Cette ann\u00e9e, profitant des nouvelles\u00a0fonctionnalit\u00e9s d\u00e9j\u00e0 et\/ou bitent\u00f4t disponibles dans les moteurs de rendu des navigateurs, j’ai d\u00e9cid\u00e9 de faire la part belle aux propri\u00e9t\u00e9s du CSS3, m\u00eame celles qui sont encore \u00e0 l’\u00e9tat de draft. Parmi toutes les propri\u00e9t\u00e9s que j’ai retenues, il y en a une que j’ai trouv\u00e9e g\u00e9niale, \u00a0sans doute parce que je ne l’ai d\u00e9couverte que <\/strong>la semaine derni\u00e8re, par hasard, en relisant les normes du W3C \u00e0 la recherche de tout \u00e0 fait\u00a0autre chose.\u00a0<\/p>\n

Cette propri\u00e9t\u00e9 c’est la pseudo class target<\/code>. Que les choses soient bien claires dans votre esprit, cette pseudo class CSS n’a rien \u00e0 voir avec\u00a0l’attribut target des balises de r\u00e9f\u00e9rences<\/a>. Non, en revanche, elle est utilis\u00e9e pour modifier le CSS de l’\u00e9l\u00e9ment vers\u00a0lequel pointe une url…. hein? k\u00e9sako !? Okay je reprends ma phrase en essayant de me faire mieux comprendre :<\/p>\n

Soit un lien du type http:\/\/www.example.com\/index.html#toto<\/code>\u00a0, si la page index.html<\/code> contient bien une balise avec pour id=\"toto\"<\/code>, en utilisant\u00a0la pseudo class :target<\/code> sur cet \u00e9l\u00e9ment on peut modifier ses propri\u00e9t\u00e9s CSS lorsque le navigateur pointe sur lui… okay \u00e7a va vous comprenez toujours pas, c’est normal, c’est difficile \u00e0 expliquer et comme un exemple vaut mieux qu’un long, incompr\u00e9hensible et ennuyeux discours voici ce que vous devriez voir<\/a> en cliquant sur le lien test1 :<\/p>\n

\"\"<\/a>
\n\"\"<\/a><\/p>\n

Et pour obtenir ce r\u00e9sultat quelque ligne CSS suffisent, \u00e0 vrai dire il en faut uniquement 2!! :<\/p>\n

td        { vertical-align:top; border:3px solid #000; }\ntd:target { background-color:#ffcc33; color:#f00; }<\/pre>\n
Ce qui est g\u00e9niale avec cette propri\u00e9t\u00e9 c’est qu’elle est d\u00e9j\u00e0 incluses dans tous les grands moteurs de rendu, \u00e0 l’exception, bien \u00e9videmment\u00a0de Trident (Internet Explorer<\/em>). Et, h\u00e9las, IE8 ne supportera pas cette m\u00e9thode. Mais cela n’est pas un grand probl\u00e8me en soit, ce que CSS ne peut faire… javascript\u00a0sait et peut le faire<\/a> (oui j’ai le droit d’utiliser le verbe savoir <\/em>Maxime \ud83d\ude00 ) . C’est, d’ailleurs, en utilisant cette technique de mani\u00e8re beaucoup plus \u00e9volu\u00e9e que j’ai pu mettre au point le nouveau menu du site, toute l’id\u00e9e est l\u00e0. Je suis\u00a0s\u00fbr que des designers plus talentueux que moi r\u00e9ussiront \u00e0 faire beaucoup mieux<\/a> , mais j’aurais au moins le m\u00e9rite d’avoir tenter quelque chose \ud83d\ude09 .\u00a0Et vous vous en pensez quoi de cette pseudo classe ?<\/p>\n","protected":false},"excerpt":{"rendered":"
d\u00e9couverte et utilisation d’une pseudo classes pr\u00e9sentes dans tous les nouveaux navigateurs qui commencent \u00e0 inclure les normes CSS3<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[135,137,286,430,515,536],"class_list":["post-401","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-css-3","tag-internet-explorer","tag-pseudo-class","tag-target","tag-trident"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}