{"id":33,"date":"2007-11-22T16:14:20","date_gmt":"2007-11-22T15:14:20","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/2007\/11\/22\/transparence-et-opacite-dans-les-navigateurs-recents\/"},"modified":"2007-11-22T16:14:20","modified_gmt":"2007-11-22T15:14:20","slug":"transparence-et-opacite-dans-les-navigateurs-recents","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/transparence-et-opacite-dans-les-navigateurs-recents\/","title":{"rendered":"Transparence et opacit\u00e9 dans les navigateurs r\u00e9cents"},"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>

Je viens de mettre \u00e0 jour le design de mon site, et j’en ai profit\u00e9 pour le rendre homog\u00e8ne. La seule diff\u00e9rence \u00e9tant que pour la partie blog, j’ai ajout\u00e9 une image en arri\u00e8re plan. Et comme j’aime me faire plaisir j’ai voulu la faire ressortir via transparence \u00e0 travers les textes et contenus m\u00e9dia de mon blog. Voici en quelques sortes le r\u00e9sultat de mes investigations en utilisant les Big4<\/strong>.<\/p>\n

Tout d’abord, pour \u00eatre clair j’appelle les Big4 <\/em>les 4 moteurs de rendus des navigateurs les plus r\u00e9pandus dans le monde PC sous windows, c’est-\u00e0-dire Trident <\/em>pour Internet Explorer 6 et 7 , Gecko <\/em>pour Mozilla firefox, Presto <\/em>pour Opera et Webkit\/KHTML<\/em> pour Safari. Je vais parler de la propri\u00e9t\u00e9 CSS<\/abbr> : opacity, <\/strong>celle-ci fait partie de la sp\u00e9cification de CSS3 et donc n’est pas standard au CSS2 ou au CSS2.1 mais les Big4 <\/em>pr\u00e9tendent avoir d\u00e9j\u00e0 int\u00e9gr\u00e9 avec succ\u00e8s cette propri\u00e9t\u00e9. Cet article va donc nous indiquer si les prestations sont \u00e0 la mesure des pr\u00e9tentions affich\u00e9es par les Big4 <\/em>\ud83d\ude42 . Enfin pour en terminer avec mon introduction voici comment, selon le W3C, on doit d\u00e9finir la propri\u00e9t\u00e9 de transparence via l’attribut opacity<\/em>.<\/p>\n

Pour un \u00e9l\u00e9ment p<\/strong> par exemple on \u00e9crira :<\/p>\n

p { opacity:0.9; } avec une valeur comprise entre 0 et 1.<\/code><\/p>\n

Lorsque opacity \u00e9quivaut \u00e0 1<\/em> l’opacit\u00e9 est maximale<\/strong>, il n’y a pas de transparence, c’est le comportement par d\u00e9faut<\/em>.
\nLorsque opacity \u00e9quivaut \u00e0 0<\/em> l’opacit\u00e9 est minimale<\/strong>, la transparence est maximale, la balise est son contenu ne sont plus visibles.<\/p>\n

Afin de tester les Big4<\/em>, j’ai cr\u00e9\u00e9 une page qui me servira de test<\/a>, et ma conclusion est sans \u00e9quivoque, Gecko est le seul des Big4 <\/em>a passer mon simple test haut la main, mais voyons cela en d\u00e9tail.<\/p>\n

\"\"<\/a> – Trident\/Internet Explorer 6 et 7<\/a>:<\/strong> le probl\u00e8me avec Trident c’est qu’il permet l’utilisation de l’opacit\u00e9 que via l’utilisation de directX donc en fait on \u00e9crit par r\u00e9ellement du CSS , d’ailleurs le v\u00e9rificateur syntaxique du W3C vous le rappellera d\u00e8s que vous essayerez de valider votre feuille de style.<\/p>\n

Pour le m\u00eame \u00e9l\u00e9ment p <\/strong>sous Trident il faudra \u00e9crire ceci :<\/p>\n

p { filter:alpha(opacity=90); } <\/code><\/p>\n

L’opacit\u00e9 varie entre des entiers compris entre 0 est 100 avec une opacit\u00e9 maximale pour la valeur 100 et une transparence maximale pour la valeur 0.<\/p>\n

Franchement, ils auraient pu faire mieux. d’autant que sous Internet Explorer 7, parmi les tonnes de bug fixes effectu\u00e9s par la IE Team, celui-ci n’a pas \u00e9t\u00e9 corrig\u00e9. A croire que Trident ne pouvait pas \u00eatre am\u00e9lior\u00e9 dans ce cas pr\u00e9cis. Donc filter <\/em>subsiste mais avec un twist. Depuis Vista, Windows a, enfin, introduit le lissage des polices de caract\u00e8res ou ClearType, par d\u00e9faut sur sa plateforme, fonction qui existait d\u00e9j\u00e0 pour Mac OS X, par exemple. H\u00e9 bien comble de malheur pour nous, si vous utilisez l’opacit\u00e9, vous perdez le ClearType pour la page. Donc les avanc\u00e9es de Windows sont contrecarr\u00e9s par l’opacit\u00e9, dingue non!!!<\/p>\n

Les autres navigateurs supportent l’utilisation CSS de l’attribut opacit\u00e9 tel que recommand\u00e9 par le W3C.<\/strong><\/p>\n

\"\"<\/a> – Presto\/Opera<\/a><\/strong> : J’aurais pu mettre ce navigateur au d\u00e9but de ma liste, car j’estime que c’est le plus mauvais de tous dans mon test du moins. Pourquoi, parce que Opera s’emm\u00e8le les pinceaux d\u00e8s qu’il s’agit d’opacit\u00e9. D’une part sous Vista il r\u00e9agit comme IE 7, il perd le lissage des polices de caract\u00e8re. D’autres part, lorsque vous avez l’outrecuidance d’ajouter un contenu multim\u00e9dia, via la balise object ( une animation Flash ou Silverlight, ou que sais-je…) l’opacit\u00e9 s’emballe et vous avez beau mettre un faible niveau d’opacit\u00e9, votre compos\u00e9 multim\u00e9dia sera quasiment illisible. Bref l’opacit\u00e9 vous emp\u00eache toute inclusion d’objets multim\u00e9dias dans votre page.<\/p>\n

\"\"<\/a> – Webkit\/KHTML\/Safari <\/a>:<\/strong> Le comportement de Safari sous Windows, m’interpelle moins, m\u00eame si celui-ci est plus radical qu’Opera. la transparence est correcte, Webkit garde le ClearType mais il refuse tout simplement d’afficher votre contenu multim\u00e9dia. Donc tout comme Opera , il emp\u00eache l’inclusion d’objet multilm\u00e9dia dans votre page. Mais, au moins \u00e0 la diff\u00e9rence d’Opera, il ne vous met pas, totalement dans l’embarras, quoiqu’il garde l’espace de votre contenu vide. Bref un comportement plus sain, \u00e0 mon avis, mais tout aussi bizarre. Notez, que si vous faites un clique droit dans l’espace o\u00f9 l’objet multim\u00e9dia aurait du se trouver, Webkit vous le rappelle en indiquant bien qu’il est en train d’afficher du Flash ( c’est le cas de mon exemple ), vraiment le comportement de ce moteur d’affichage est bizarre.<\/p>\n

\"firefox.png\"<\/a>– Gecko\/Mozilla Firefox<\/a> :<\/strong> la transparence est nickel, le lissage des caract\u00e8res perdure, le contenu multim\u00e9dia est toujours pr\u00e9sent et accessible , bref c’est le gagnant du jour.<\/p>\n

Encore une fois, cela est le comportement sous Windows Vista\/XP\/2000 , je n’ai pas \u00e9tudi\u00e9 ce comportement sous MacOS X, je n’ai pas de Mac sous la main, ou sous GNU Linux et autre Unix-Like, pourtant je travaille avec Ubuntu. Donc si vous avez la possibilit\u00e9 de tester ma page et de me donner un compte rendu, je le rajouterai ici sans probl\u00e8me.<\/p>\n

Bref, finalement j’ai eu recours \u00e0 un hack<\/em>, dont je ne suis pas fier pour quand m\u00eame avoir ma transparence sous Gecko uniquement, vue les lacunes des autres navigateurs. Je suppose que cela ne fonctionnera pas toujours dans les versions futures de Gecko, donc ne l’utilisait pas<\/strong>, du moins je ne le recommande \u00e0 personne, avant d’avoir bien compris les implications de son utilisation. Il “suffit” de pr\u00e9fixer la propri\u00e9t\u00e9 opacity <\/code>avec -moz-<\/code> pour faire un “rollback<\/em>” sur la propri\u00e9t\u00e9 -moz-opacity<\/code> sp\u00e9cifique \u00e0 Gecko. Il faut comprendre que d\u00e8s que cette attribut sera retir\u00e9 des versions ult\u00e9rieures de Gecko, se hack ne fonctionnera plus . Ce hack est loin d’\u00eatre la solution id\u00e9ale, mais bon, je dois dire que je ne suis pas fan des hacks \u00e0 la base donc je suis tr\u00e8s mauvais pour en cr\u00e9er des bons.<\/p>\n","protected":false},"excerpt":{"rendered":"

L’opacit\u00e9 et\/ou la transparence, cela d\u00e9pend de quelle mani\u00e8re on aborde cette propri\u00e9t\u00e9 du CSS3, est d\u00e9j\u00e0 support\u00e9 par les navigateurs r\u00e9cents. Mais ce support est-il complet ? <\/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":[137,382,403,533],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-web","tag-css-3","tag-navigateurs","tag-opacite","tag-transparence"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/33","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=33"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}