Chez Jérémie - Arrétez de me casser les gonades avec border-radius - Commentaires

Arrétez de me casser les gonades avec border-radius - Stéphane Deschamps

Stéphane Deschamps — Fri, 07 Jan 2011 16:09:54 +0100

“il faut bien garder un exemple pour Stéphane”. Merci Jérémie

Arrétez de me casser les gonades avec border-radius - Jeremie

Jeremie — Wed, 05 Jan 2011 18:02:32 +0100

Ah, faut-il donc que vous soyez taquin

Ceci dit, moi qui utilise aussi beaucoup mon clavier pour naviguer dans les pages, je n’avais pas remarqué ça. J’imagine que c’est parce que je n’utilise pas page-up et page-down, mais simplement up et down.

J’en prend bonne note, mais ceci dit, je n’envisage pas de changer ça pour l’instant (après tout, je suis chez moi hein, je fais ce que je veux… et puis, il faut bien garder un exemple pour Stéphane )

Arrétez de me casser les gonades avec border-radius - Stéphane Deschamps

Stéphane Deschamps — Wed, 05 Jan 2011 15:15:22 +0100

En écho à la remarque de Michel :

Tiens je n’ai pas eu le temps de le faire mais je voulais justement faire un article sur les position:fixed et montrer leur nocivité au clavier en prenant ce site comme exemple, (qui est par ailleurs bien joli, hein, ne nous méprenons pas).

(j’aime bien prendre les sites des copains comme cobayes, sans doute parce qu’ils me donnent toujours le droit de le faire).

Donc je jette l’idée ici pour vous promettre de le faire bientôt.

Arrétez de me casser les gonades avec border-radius - Nicolas Hoizey

Nicolas Hoizey — Wed, 05 Jan 2011 14:22:38 +0100

Media queries FTW!

Arrétez de me casser les gonades avec border-radius - Olivier

Olivier — Wed, 05 Jan 2011 10:50:06 +0100

curl -s http://jeremie.patonnier.net/themes… | grep -E “(border-radius|box-shadow)” | wc -l

Oui, je sais, je suis une pourriture mais c’était tentant En plus ça compte les déclarations -moz et -webkit.

Arrétez de me casser les gonades avec border-radius - michel v

michel v — Wed, 05 Jan 2011 10:48:52 +0100

J’aimerais bien troller moi aussi, mais j’ai eu un mal fou à lire plus de 4 paragraphes.

Les divs qui couvrent le haut ET le bas de la page gênent considérablement la lecture pour qui utilise ses touches page up/down au lieu de sa molette de souris (il faut revenir sur ses pas pour voir les lignes cachées).

Arrétez de me casser les gonades avec border-radius - Daniel Glazman

Daniel Glazman — Wed, 05 Jan 2011 10:34:41 +0100

En un mot : exactement….

Daniel Glazman
W3C CSS Working Group, Co-chairman

Arrétez de me casser les gonades avec border-radius - Thomas

Thomas — Mon, 03 Jan 2011 18:09:43 +0100

Une petite remarque qui n’enlève rien à la véracité et la qualité de cet article : le bug (Chrome Linux et Windows) des ombres intérieures dans les boîtes à coins arrondis est fixé dans les nightlies et le sera donc aussi pour Chrome 10 je pense : http://code.google.com/p/chromium/i… + https://bugs.webkit.org/show_bug.cg…

Arrétez de me casser les gonades avec border-radius - Mr.MoOx

Mr.MoOx — Mon, 03 Jan 2011 15:40:15 +0100

Moi j’ai envie de dire que c’est vachement mieux. Car le gros avantage d’utiliser du CSS et non des images, c’est que avec des agrandissements, pas de pixelisation. Car l’image ça reste du pixel (hors SVG oué oué). À l’inverse de CSS qui gère autre chose. Si par exemple je fais un calendrier de l’avent que je met sur une sidebar et que je veux le même en plus grand sur une page dédié, j’augmente ma font-size sur mon élement et pafff, ca s’adapte ! Sans “pixelisation”. Et faire ça sans multiplier mes images (jpg/png…)… M’enfin j’dis ça y’aura tjrs un argument pour me tacler m’enfin, moi je continuerais à utiliser ces propriétés, vachement pratique.
Puis faut pas parler des sélecteurs, car c’est mignon, mais dans le genre lourd à parser…

Arrétez de me casser les gonades avec border-radius - Jeremie

Jeremie — Mon, 03 Jan 2011 14:01:24 +0100

@naholyr ce n’est pas “Vachement mieux”, c’est “Vachement plus facile”. Une nuance me diras-tu… certes, mais de taille en ce qui me concerne. En effet, “mieux” est un jugement de valeur là ou “plus facile” est un simple constat technique. Je ne sais pas si ce que j’ai fait sur ce blog est mieux, je sais juste que ça m’a pris moins de temps avec des contraintes différentes mais acceptable, et c’est tant mieux

Arrétez de me casser les gonades avec border-radius - naholyr

naholyr — Mon, 03 Jan 2011 13:35:10 +0100

Mais si c’est si mal, je ne comprends pas pourquoi border-radius est utilisé ici-même au lieu de faire des images ? header #quickAccess, les commentaires, le menu… ah bah partout où il y a des bords arrondis en fait.

C’est que ça doit avoir un tout petit intérêt, non ?

Tout le monde est d’accord, ce n’est pas une révolution, mais c’est bien utile et il était surtout plus que grand temps que ça existe. C’est en ça que les gens sont contents, bien sûr que ça marchait bien avant, et que pour les cas complexes ça ne sert à rien, mais pour les cas simples (comme sur ce blog par exemple, au hasard), c’est quand-même vachement mieux non ?

Arrétez de me casser les gonades avec border-radius - STPo

STPo — Mon, 03 Jan 2011 13:31:06 +0100

@Jérémie
Alors moi je suis tout à fait d’accord pour dire que :
- CSS c’est pas du tout fait pour dessiner
- mon calendrier est joli =þ

Par contre, et c’est là où je tique, mon calendrier, c’est de la pure mise en forme de contenu sans mark-up parasite (sauf pour les “anneaux” mais c’est parce que j’ai bâclé), donc c’est pas “dessiner stérile”, c’est “mettre en page joli”. De façon un peu extrême, certes, et c’est un cas particulier qui s’y prête bien, mais quand-même.

(très joli ton blog plein de radiations sinon hin )

Arrétez de me casser les gonades avec border-radius - dhoko

dhoko — Mon, 03 Jan 2011 12:49:21 +0100

Plutôt d’accord avec STPo, sur le fait que ce sont des choses attirantes.
Autre détails pour tacler box-shadow (j’ai rien contre), ça consomme beaucoup de ressources, un site web avec de fortes ombres (+60px, en inset ou non) le site rame à mort au scroll.

Donc c’est bien beau mais, ça limite un peu certains usages (je suis pourtant avec Minefield et Chromium 10…).

Et par défaut chaque effet visuel (transition, ombres) consomme beaucoup de ressources.

Arrétez de me casser les gonades avec border-radius - Jeremie

Jeremie — Mon, 03 Jan 2011 11:34:09 +0100

@Mr.MoOx : Oui, c’est une utilisation très réussie de box-shadow mais ce qui est remarquable ce n’est pas box-shadow en lui-même mais le mélange créatif réalisé avec les pseudo-éléments :before et :after (mes chouchous de CSS2) et les transformation 2D (ça c’est du CSS3 qui roxxe).

Arrétez de me casser les gonades avec border-radius - Jeremie

Jeremie — Mon, 03 Jan 2011 11:25:08 +0100

@STPo : Tout à fait, border-radius et box-shadow sont une bonne introduction a ce que sera CSS3, mais là, à mon sens, on frise l’indigestion. Ceci étant, je ne tape pas sur les innovations, au contraire, je les appelle de mes vœux (les sélecteurs, bordel, les sélecteurs). Par contre, comme toujours, ce n’est pas parce qu’il y a une innovation sympa qu’il faut oublier les vielles méthodes qui ont tout de même l’intérêt d’une certaine robustesse et qui ne sont pas invalidées par les nouveautés.

Certes, il est ridicule de vouloir reproduire du Photoshop avec les seules CSS… mais avec une touche de SVG, c’est une autre histoire (et si tu veux de l’innovation fait dans un vieux pot, SVG, ça se pose un peu là). J’ai vue le calendrier que tu as fait, et s’il est certes joli, pour moi, c’est typiquement ce qu’il ne faut pas faire avec CSS3 (et qui, hélas, sera fait et refait). Utiliser CSS pour dessiner, c’est un peu comme accoupler un âne et une jument, ça donnera bien quelque chose, mais le résultat est stérile et ne va pas bien loin.

Et oui mon propre blog est gavé de border-radius… mais je n’ai jamais dit qu’il ne fallait pas l’utiliser, j’ai juste dit qu’il n’était pas la peine dans faire des caisses à son sujet

@HTeuMeuLeu : Border-radius et box-shadow sont utilisable dans une certaine mesure aujourd’hui mais avec un certain nombres de précautions à prendre liées à IE essentiellement et à quelques bug d’implémentations (en particulier dans Safari/Chrome). De leur coté, les media query sont très bien supportée dans le monde du mobile grâce à Webkit et Opéra et sont parfaitement utilisable avec beaucoup moins de précaution à prendre. De manière général, en 2011, faire du CSS3 se résume à : prévoir une dégradation dans IE ou faire du Javascript pour compenser avec ces navigateurs.

@six_pix_under : Je ne rejette pas la simplicité (je l’utilise même sur ce blog), je dis juste qu’il n’y a pas matière à s’extasier et qu’il existe beaucoup d’autre méthodes (dont certaine ont fait leur preuve depuis longtemps) pour obtenir le même résultat sans que cela pose le moindre problème.

Arrétez de me casser les gonades avec border-radius - six_pix_under

six_pix_under — Mon, 03 Jan 2011 11:17:43 +0100

C’est quand même marrant ce rejet de la simplicité que nous apporte certaines propriétés CSS3 dont les border radius et les box shadow. Certes il n’y a pas que ça mais c’est quand même bien pratique alors de la a en faire un billet…

Arrétez de me casser les gonades avec border-radius - Mr.MoOx

Mr.MoOx — Mon, 03 Jan 2011 11:10:53 +0100

Et ça alors ?
Je vois pourtant du box-shadow bien utilisé :p http://nicolasgallagher.com/css-dro…

Arrétez de me casser les gonades avec border-radius - HTeuMeuLeu

HTeuMeuLeu — Mon, 03 Jan 2011 11:01:27 +0100

Très bon article ! Même si je suis partiellement d’accord avec toi.

OUI, CSS3 ne doit pas se limiter à des propriétés comme border-radius ou box-shadow. Et OUI, le gros avantage de CSS3, ce sera les nouveaux modèles de mise en page, les media queries, les animations et les transformations.

Mais ces propriétés sont encore très loin d’être utilisables sur des vrais projets clients. Par contre, border-radius et box-shadow sont utilisables dès maintenant, pour tous les navigateurs (avec les filouteries habituelles en .htc pour IE). Et ça change tout. Ce n’est pas un rêve lointain comme les media queries, c’est déjà maintenant. Je gagne un temps fou à utiliser ces propriétés, notamment quand je fais du maquettage directement dans le navigateur. Plus besoin de modifier sa maquette et redécouper ses images. Un éditeur de code est c’est parti !

Bref, je comprends ton coup de gueule, mais dieu merci, nous sommes en 2011 et on peut faire des bords arrondis en une ligne de code.

Arrétez de me casser les gonades avec border-radius - STPo

STPo — Mon, 03 Jan 2011 10:57:29 +0100

Huhu, gros troll bien velu de Nouvel An !
Même si je suis tenté de te suivre sur cette voie (on va voir fleurir du box-shadow et du border-radius mal branlé partout, c’est une évidence — et c’est déjà le cas), je vais me faire l’avocat du Diable…

À mon avis tu te trompes de cible : pourquoi taper sur les innovations ? On peut faire les mêmes critiques sur la non-flexibilité des ombres portées ou des bords arrondis dans Photoshop, pour la bonne raison que ce sont plus une matière première qu’une finalité. Reproduire du Photoshop en CSS est à mon avis illusoire (puisque CSS est beaucoup plus limité) par contre utiliser CSS pour créer directement des objets graphiques (simples) me paraît une excellente chose. Par exemple hier j’ai fait ce petit calendrier en CSS : http://twitfat.com/user/STPo Graphiquement aucune révolution, mais c’est tout à fait adapté au besoin, léger et souple (le markup est perfectible mais c’est une autre histoire).

Le vrai problème vient du fait qu’on vend du Photoshop avant du CSS, et que donc l’intégrateur en est réduit à reproduire en CSS le travail du graphiste qui a déjà été vendu et validé (ce qui est impossible, à moins d’une créa simpliste), donc il passe par des images parce qu’il n’a pas le choix.

Bref, border-radius et box-shadow sont peut-être les arbres qui cachent la forêt CSS3, mais tu peux retourner le problème en disant que ce sont des produits d’appel intéressants et très visibles pour sensibiliser aux autres nouveautés que CSS3 amène(ra) dans ses valises…

PS: et puis bon critiquer border-radius quand les boutons de son formulaire de commentaires en sont gavés… Hihi

Arrétez de me casser les gonades avec border-radius - jpvincent

jpvincent — Mon, 03 Jan 2011 10:33:00 +0100

j’adore
cela dit, si on ne parle que des coins arrondis et des ombres portées, c’est aussi parce que la dégradation gracieuse est acceptable : le fait même que ça soit de petits effets graphiques fait que c’est peu important donc on peut l’utiliser dès aujourd’hui sur des sites grand public

les autres fonctionalités que tu cites ont des impacts plus intéressants certes mais aussi plus lourds et pas sacrifiables : tu ne peux pas sacrifier le positionnement de blocs par exemple, et ça me semble limite pour les effets des sélecteur CSS