2011-04-20 12:29:01 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "CSS, web, programming, Chrome, Safari, Firefox" >
2011-04-20 13:56:52 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
2012-04-02 21:43:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/solarized.css" / >
2011-04-20 13:56:52 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2012-05-02 15:43:56 +00:00
< link href = 'http://fonts.googleapis.com/css?family=Inconsolata' rel = 'stylesheet' type = 'text/css' >
2011-04-20 12:29:01 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
2011-04-20 13:56:52 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "N'utilisez pas de gradients avec Chrome" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Do not use CSS gradient with Chrome" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2010-07-07-CSS-rendering-problems-by-navigator/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2012-05-02 15:43:56 +00:00
< script type = "text/javascript" src = "/Scratch/js/highlight/highlight.pack.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/article.js" > < / script >
2011-04-20 12:29:01 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
< title > N'utilisez pas de gradients avec Chrome< / title >
< / head >
2011-10-18 22:30:00 +00:00
< body lang = "fr" class = "article" >
2011-04-20 12:29:01 +00:00
< script type = "text/javascript" > / / < ! [ C D A T A [
2011-04-20 13:56:52 +00:00
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
2011-04-20 12:29:01 +00:00
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-07-07-CSS-rendering-problems-by-navigator/" onclick = "setLanguage('en')" > in English< / a >
2011-04-20 12:29:01 +00:00
< / div >
2011-09-28 16:05:55 +00:00
< div class = "flush" > < / div >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "titre" >
< h1 >
N'utilisez pas de gradients avec Chrome
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
2012-05-03 09:21:34 +00:00
< p > Beaucoup d’ utilisateurs de < a href = "http://reddit.com" > Reddit< / a > m’ ont rapporté que mon site était très long à charger et à < em > scroller< / em > .
Ils pensaient qu’ il s’ agissait d’ un problème dû aux ombres que j’ applique sur le texte.
J’ étais un peu surpris puisque je fais mes tests sur une machine vraiment très lente et je n’ avais jamais détecté ces problèmes.
En réalité, ce qui ralenti le rendu de ce site est par ordre d’ importance :< / p >
2011-04-20 12:29:01 +00:00
< ol >
< li > Les dégradés sur Chrome (pas dans Safari sur Mac)< / li >
< li > les < em > box shadows< / em > sur Firefox< / li >
< / ol >
< h2 id = "les-dgrads" > les dégradés< / h2 >
2012-05-03 09:21:34 +00:00
< p > Sur Safari il n’ y a absolument aucun problème avec les dégradés. Par contre sur Chrome sous Linux le site devient quasiment inutilisable.< / p >
2011-04-20 12:29:01 +00:00
2012-05-03 09:21:34 +00:00
< p > Safari et Chrome utilisent < em > webkit< / em > tous les deux. Lorsque vous accéder à ce blog avec javascript activé, un CSS spécifique à votre navigateur est ajouté. Jusqu’ à maintenant je faisais un tri entre : IE, Mozilla et Webkit. Maintenant j’ ai rajouté un cas particulier pour Chrome.
Maintenant j’ ai supprimé les gradients lorsque vous naviguer sur ce site en utilisant Chrome.< / p >
2011-04-20 12:29:01 +00:00
2012-05-03 09:21:34 +00:00
< p > Je n’ ai pas vérifier la vitesse de rendu de toutes les propriétés de CSS 3. Mais je vous conseille de ne pas utiliser < strong > < code > -webkit-gradient< / code > < / strong > avec Chrome. Au moins sous Linux.< / p >
2011-04-20 12:29:01 +00:00
< h2 id = "les-ombres-box-shadow" > Les ombres (box-shadow)< / h2 >
2012-05-03 09:21:34 +00:00
< p > J’ ai aussi remarqué que < strong > < code > -moz-box-shadow< / code > < / strong > ralenti le rendu sous Firefox (et sous Linux). Alors que l’ équivalent webkit ne pose aucun problème à Safari sous Mac.< / p >
2011-04-20 12:29:01 +00:00
< h2 id = "ombres-de-texte" > Ombres de texte< / h2 >
2012-05-03 09:21:34 +00:00
< p > Beaucoup d’ utilisateurs mon dit d’ utiliser text-shadows avec parcimonie. Mais je pense qu’ il ne s’ agissait pas là du problème du ralentissement du site. C’ est pourquoi je vais les remettre.< / p >
2011-04-20 12:29:01 +00:00
< h2 id = "en-conclusion" > en conclusion< / h2 >
2012-05-03 09:21:34 +00:00
< p > N’ utilisez pas < strong > < code > -webkit-gradient< / code > < / strong > avec google Chrome pour l’ instant.
2011-04-20 12:29:01 +00:00
Utilisez < strong > < code > -moz-box-shadow< / code > < / strong > avec parcimonie.< / p >
< / div >
2012-04-10 13:56:34 +00:00
< div id = "social" >
< div class = "left" > < a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "yogsototh" > Tweet< / a >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = "//platform.twitter.com/widgets.js" ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , "script" , "twitter-wjs" ) ; < / script >
< / div >
< div class = "left" > < div class = "g-plusone" data-size = "medium" data-annotation = "inline" data-width = "106" > < / div >
< script type = "text/javascript" >
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
< / script >
< / div >
< div class = "flush" > < / div >
< / div >
2011-04-20 12:29:01 +00:00
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
2012-04-10 13:56:34 +00:00
document.write('< div id = "clickcomment" > Commentaires & Partage< / div > ');
2011-04-20 12:29:01 +00:00
< / script >
< div class = "flush" > < / div >
2012-04-10 13:56:34 +00:00
2011-04-20 12:29:01 +00:00
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2011-04-20 13:56:52 +00:00
var idcomments_post_id = '/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/';
2011-04-20 12:29:01 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
2011-04-20 13:56:52 +00:00
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-04-20 13:56:52 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Bienvenue< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" > < span class = "nicer" > «< / span > Cappuccino ou jQuery ?< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/" > < span class = "nicer" > «< / span > Comment faire des popups en jQuery rapidement< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-06-17-hide-yourself-to-analytics/" > < span class = "nicer" > «< / span > Se cacher de ses statistiques web< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-07-31-New-style-after-holidays/" > Nouveau style après les vacances < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-07-09-Indecidabilities/" > Indécidabilités (partie 1) < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-08-23-Now-heberged-on-heroku/" > Maintenant sur Heroku < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
2012-04-02 21:43:39 +00:00
< div >
2012-04-10 13:56:34 +00:00
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
2012-04-02 21:43:39 +00:00
< / div >
2011-04-20 12:29:01 +00:00
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Écrit le : 07/07/2010
modifié le : 07/10/2010
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >