04
AVR

CSS avancées, vers HTML5 et CSS3: 2 ouvrages à gagner + interview

Publié le 04/04/11 à 09h37 par DJo

Pour bien commencer la semaine, retrouvez une review du dernier ouvrage de Raphaël Goetter: "CSS Avancées, Vers HTML5 et CSS3".

CSS Avancées, Vers HTML5 et CSS3

Avec l'arrivée à grand pas des technologies CSS3 et HTML5, un ouvrage pour bien démarrer avec les nouvelles instructions était très attendu !

Raphaël Goetter qui n'est autre que le papa d'Alsacréations nous livre les secrets du CSS que ce soit des instructions peu connues du CSS2 ou des dernières instructions CSS3, vous n'aurez qu'une hâte après la lecture de ce livre: Mettre tout ça en pratique !

 

Les sujets abordés

  • Fonctionnalités de CSS 2.1 oubliées à cause d’IE6 (sélecteurs d’adjacence, de parenté, d’attribut, génération de contenus en CSS, règles @),
  • Schémas de positionnement "classiques" détaillés, avec astuces
  • Positionnement "avancés" (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3),
  • Microformats,
  • Gestion de projet en CSS, optimisation des performances, frameworks et outils CSS,
  • HTML5 (syntaxe, attributs, formulaires, audio, video, canvas, APIs),
  • CSS3 (propriétés, sélecteurs, préfixes, media queries, transformations, animations),
  • Compatibilités navigateurs, résolution de bugs (hacks, commentaires conditionnels, haslayout),
  • Multimédia : CSS screen, CSS pour mobiles, CSS pour l’impression, CSS et messageries, médium vocal, médium de projection et médium de télévision.

 

Mon avis perso

Contrairement à plusieurs livres sur des technologies web, j'ai pris plaisir à lire celui-ci du début à la fin. Non seulement, il m'a permis de me remettre en tête des instructions/propriétés CSS2 que j'utilise (trop) peu souvent, mais j'ai aussi appris pas mal de choses sur les nouvelles instructions/propriétés HTML5 et CSS3.

J'ai apprécié la partie sur la méthodologie et conventions proposées pour bien organiser sa feuille de style. Le chapitre sur les newsletters et le CSS m'a aussi été bien pratique !

Bref, je recommande ce livre chaleureusement pour les développeurs novices qui souhaitent en savoir plus sur l'intégration en CSS ou pour les plus pro qui y trouveront aussi matière à apprendre.

Grâce à la qualité de rédaction et l'impression en couleur du livre, vous arriverez à la fin sans même vous en apercevoir. C'est bon signe !

 

Quelques questions à l'auteur

Raphaël Goetter a accepté gentillement de répondre à quelques questions autour de l'ouvrage et du CSS en général:

 

Comment avez-vous réussi à écrire cet ouvrage très riche en enseignement sur des technologies en cours de développement ?

Raphaël Goetter

Contrairement à ce que laisse croire le sous-titre du livre, très peu de sections concernent des technologies en cours de développement : les spécifications en brouillon CSS3 et HTML5 ne représentent "que" deux chapitres de l'ouvrage. Tout le reste étant consacré à des techniques et fonctionnalités avancées de CSS généralement oubliées à cause d'IE6 mais redoutablement utiles, finalisées et parfaitement utilisables en production : propriétés, sélecteurs et positionnement avancés, résolution de bugs, ainsi que gestion de projets CSS et des divers médias (mobile, impression, e-mail, etc.).

 

 

A partir de quand pensez vous que les technologies HTML5 et CSS3 arriveront suffisamment à maturité pour être utilisées en production ?

Voilà une question aussi vaste que ne le sont les spécifications HTML5 et CSS3 ! :) A vrai dire, chacune est composée de plusieurs dizaines de modules ayant chacun lui-même des sous-branches. Certains modules sont d'ores et déjà finalisés et utilisables en production. D'autres ne le sont pas mais tous les navigateurs les ont intégrés (depuis IE9). Et enfin, certains modules sont en plein chantier et non implémentés... et ne le seront peut-être jamais. Fort heureusement, il n'y aura pas à attendre que toute la spécification CSS3 soit finalisée pour employer une simple propriété telle que border-radius pour générer des coins arrondis !

 

Quelle est pour vous la propriété CSS3 incontournable à utiliser dès aujourd'hui ?

Une grande majorité de propriétés décoratives ou "fun" peuplent le Web actuellement : tous les jours, de nouveaux sites web de démontration promeuvent les effets d'arrondis, d'ombrages, de polices exotiques, voire d'animation sans JavaScript.

Pour autant, deux modules de CSS3 me semblent largement plus utiles et prometteurs :

- Les nouveaux types de positionnement : les designers web ont vraiment besoin d'un schéma de positionnement stable et intuitif (les tableaux de mise en page, les frames et le positionnement flottant on fait beaucoup de dégâts). Le "modèle de boîte flexible", introduit en CSS3 semble remporter tous les suffrages.

- Les Media Queries : une fonctionnalité CSS3 offrant un niveau de ciblage fin de la mise en forme d'une page selon la taille de l'écran notamment (devient lentement incoutournable en webdesign mobile)

 

Quel IDE utilisez vous pour développer / intégrer en XHTML/CSS ?

Après avoir goûté aux joies de PSPad puis Notepad++, je suis tombé amoureux de e-texteditor (issu du projet Textmate) et qui m'offre une latitude de personnalisation jamais atteinte jusque là.

 

Que pensez-vous du template HTML5 Boilerplate ?

HTML5 boilerplate est un bon outil pour débuter un projet de site web... à l'instar de beaucoup d'autres bons outils. C'est un peu le souci actuellement : chaque jour, de nouveaux outils, démonstrations ou script voient le jour afin de faciliter la vie ou rendre CSS3 compatible avec les anciens navigateurs. Au final, nous sommes obligés de comprendre ces outils pour en tirer le meilleur. Dans le cas de HTML5 boilerplate, il faut vraiment faire la part des choses et exclure les parties non employées au sein de son projet pour ne pas se retrouver avec une feuille de style "usine à gaz" dont la moitié n'est pas utilisée. Pire, dont l'autre moitié doit parfois être redéfinie par la suite. Bref, un bon point de départ pour tout intégrateur ayant déjà de bonnes connaissances en la matière.

 

 Utilisez-vous, pour vos projets professionnels ou personnels, un framework CSS tel que 960 Grid ou Blueprint ?

Ma réponse est très proche de la précédente : les frameworks CSS sont de bons outils dans le cas de projets web en équipe mais constituent une surcouche qui nécessite un apprentissage préalable du dispositif et qui demeurent une usine à gaz dont seule une partie sera véritablement utile. D'autant plus que je ne suis pas fan de l'emploi massif des classes dénuées de sens ("col2", "span12", etc.) Par contre, le concept de grilles pour le design m'attire beaucoup car je suis persuadé que de la contrainte naît la créativité.

 

Que pensez-vous d'Internet Explorer ? (Question troll). Maintenant que Microsoft abandonne le support d'IE6, participerez vous à la lutte contre le support d'IE7 ou pensez-vous qu'il est trop tôt pour commencer à exclure la version 7 pour le moment ? (ie7nomore.com semble en dire long !)

Je n'ai pas d'a-priori spécifique envers "Internet Explorer" en général, mais IE6 est effectivement obsolète et en déclin. Il en est de même pour IE7. Cependant, de nombreuses grosses entreprises sont dépendantes d'applications lourdes développées pour IE6 et nécessitant une migration longue et coûteuse afin de s'adapter aux nouvelles versions du navigateur de Microsoft, d'où les réticences justifiées de certains clients. En ce qui concerne mon agence web alsacreations.fr, nous ressentons nettement le fossé entre IE6/IE7 et IE8 et nous éduquons nos clients aux problèmes d'obsolescence (ie7nomore.com fait partie de notre arsenal éducatif ;))... Parce que "faire un site web pour tous les navigateurs" ne veut plus rien dire aujourd'hui lorsque 4 générations d'Internet Explorer vivotent ensemble.

 

Concours: 2 ouvrages "CSS avancées, vers HTML5 et CSS3" à gagner !

Concours sur la Ferme du Web

Vous aurez peut être la chance de remporter l'un des deux livres mis en jeu sur la Ferme du Web grâce à Eyrolles.

Pour remporter l'ouvrage:

  • Publiez un commentaire à la suite de votre billet en nous disant quelle est la propriété CSS3 qui vous plaît le plus.
  • Tweetez le message suivant:

2 livres CSS Avancées, vers HTML5 et CSS3 à gagner sur http://fdw.lu/apy (cc @lafermeduweb @eyrolles) #concours

Tirage au sort mercredi 06/04 dans la journée ! Bonne chance à tous :)

 

Résultats du concours

Apparemment, vous êtes motivés pour gagner le livre ! Avec plus de 160 commentaires et 185 tweets, on peut dire que le concours est un succès !

Voici sans plus attendre le tirage au sort des deux gagnants sur notre cher random.org:

Tirage au sort parmi les commentaires:

Tirage au sort parmi les commentaires

Bravo à Andrew Herrault qui remporte le premier exemplaire du livre !

 

Tirage au sort parmi les tweets

Tirage au sort parmi les tweets

Bravo à @clowniseb qui remporte le 2ème exemplaire de l'ouvrage !

 

Et pour ceux qui n'ont malheureusement pas pu remporter le livre, il ne vous reste plus qu'à faire un tour sur Amazon pour assouvir votre soif de connaissances:

Bonne lecture ! Et encore bravo aux deux vainqueurs.

Baraguiné par ichapa le 04/04/11 à 09h44
ichapa via Twitter
preums :P
Pour moi la meilleur propriété css3 est je pense box-shadow, elle permet vraiment de faire des trucs sympas ;)
Baraguiné par echange_troc le 04/04/11 à 09h45
echange_troc via Twitter
une proriété sympa : box-shadow qui permet de faire des effet d'ombres
Baraguiné par phobos le 04/04/11 à 09h46
phobos sur La Ferme du Web
Avec border-radius, terminé les images pour faire des coins arrondis.
Baraguiné par le 04/04/11 à 09h48
Border-radius ! Enfin ! Fini les tableaux et les images pour créer des bords arrondis ... Le pied total !
Baraguiné par Florian_FB le 04/04/11 à 09h49
Florian_FB via Twitter
Pour moi c'est border-radius qui permet de faire des petit effet bien sympa sans ce prendre la tête.
Baraguiné par AdrienVH le 04/04/11 à 09h49
AdrienVH via Twitter
Comme les précédents commentaires, je pense à box-shadow ou border-radius. Tellement de temps gagné lors de l'intégration !
Baraguiné par ju15020v le 04/04/11 à 09h49
ju15020v sur La Ferme du Web
Border-radius, pour moi aussi , évite beaucoup des longues minutes de cassage de crane !
Baraguiné par reactif le 04/04/11 à 09h51
reactif via Twitter
Moi aussi je suis assez fan des media queries aussi !
Baraguiné par nkos le 04/04/11 à 09h52
nkos sur La Ferme du Web
fan de border-radius :)
Baraguiné par WilliamVercken le 04/04/11 à 09h54
WilliamVercken via Twitter
box-shadow !!... même si border-radius n'est pas bien loin. :)
Baraguiné par mcpaccard le 04/04/11 à 09h54
mcpaccard via Twitter
Merci pour la critique objective de cet ouvrage qui a vraiment l'air intéressant, je veux participer aussi ! :)
Baraguiné par lynksone le 04/04/11 à 09h55
lynksone sur La Ferme du Web
Bonjour,
je pense également au border-radius qui permet enfin d'obtenir des design esthétique sans être obligé d'utiliser un embriquement de div...

L'amélioration de la propriété background qui permet d'appliquer plusieurs images en arrière plan est aussi une réelle avancé...
Baraguiné par orangevinz le 04/04/11 à 09h55
orangevinz sur La Ferme du Web
"border-radius" également !
Baraguiné par lryo17 le 04/04/11 à 09h55
lryo17 via Twitter
border-radius sans aucun doute ! Adieu les prises de têtes sur les PNG, placement des images etc !!! Bienvenue aux nouveaux standards !
Baraguiné par mcpaccard le 04/04/11 à 09h55
mcpaccard via Twitter
Et ma propriété préférée est box-shadow :) tellement plus chouette que de se taper un modèle de boite à 8 DIV ou autres solutions exotiques !
Baraguiné par StephaneQ le 04/04/11 à 09h57
StephaneQ via Twitter
border-radius et box-shadow
Baraguiné par LapinOuf le 04/04/11 à 09h57
LapinOuf via Twitter
Border-radius pour moi aussi qui est plutôt sympa combiné à gradient pour faire de jolies boutons etc .. :D
Beaucoup de choses à apprendre, j'espère que ce livre sera pour moi ^^
Baraguiné par hickone le 04/04/11 à 09h59
hickone sur La Ferme du Web
Pour moi aussi c'est le Border-radius en premier lieu car très pratique et permet de gagner du temps, et le retour du @font-face bien que difficilement compatible avec IE.
Baraguiné par dotpeaches le 04/04/11 à 09h59
dotpeaches via Twitter
Tiens j'ai failli l'acheter hier le livre !
Bon, c'est un peu idiot, mais pour le moment, ma propriété CSS3 favorite est border-radius !
Cela fait peut être un peu superficiel, mais je n'ai pas eu le temps de me pencher réellement sur les nouveautés CSS3 pour le moment... :/
Baraguiné par lenny le 04/04/11 à 10h03
lenny sur La Ferme du Web
"border-radius" 1
Baraguiné par rivsc57 le 04/04/11 à 10h03
rivsc57 via Twitter
On peut faire des trucs géniaux avec border-image !

Sinon je rejoins les autres : Border-radius et box-shadow, et aussi font-face même si c'est pas CSS3
Baraguiné par guile le 04/04/11 à 10h04
guile sur La Ferme du Web
Vais-je être le seul à adorer transform et toutes ses possibilités graphiques insoupçonnées?
Baraguiné par anis-s le 04/04/11 à 10h04
anis-s sur La Ferme du Web
A la quasi unanimité, border-radius a changé nos vies, et je suis bien d'accord !
Baraguiné par ange282521 le 04/04/11 à 10h04
ange282521 sur La Ferme du Web
j'aime bien aussi la propriété border-radius
Baraguiné par teger13 le 04/04/11 à 10h05
teger13 sur La Ferme du Web
la propriété @font-face
La gestion des polices ebfin facilité :-)
Baraguiné par Garouserique le 04/04/11 à 10h06
Garouserique sur La Ferme du Web
Pour faire différents des autres, je dirais "columns" ;) !
Baraguiné par foxmask le 04/04/11 à 10h07
foxmask via Twitter
@media !
les media queries c'est franchement bien pratique, ah c'est pas une property ? pas grave @media qd meme :)
Baraguiné par Whitou le 04/04/11 à 10h07
Whitou via Twitter
Pas très original a la lecture des commentaires précédents, mais c'est vrai que le boder-radius est quand même assez fabuleux !
Baraguiné par ipatate le 04/04/11 à 10h09
ipatate sur La Ferme du Web
je dirais le display: box qui signe la fin du float:left :)
Baraguiné par Matteobz le 04/04/11 à 10h10
Matteobz via Twitter
@font-face est vraiment sympa...enfin des typos "exotiques" dans nos pages web.
Baraguiné par snypi le 04/04/11 à 10h11
snypi sur La Ferme du Web
je tente ma chance pour mon premier post mais sans originalité je dirais que border-radius est une propriété qui simplifie la vie
Baraguiné par Belkira le 04/04/11 à 10h14
Belkira sur La Ferme du Web
Border-radius pour moi aussi :)
Baraguiné par Mric78 le 04/04/11 à 10h15
Mric78 via Twitter
Le border-radius également, simple et efficace :)
Baraguiné par AxelB_ le 04/04/11 à 10h17
AxelB_ via Twitter
Même si celles que j'utilise le plus sont les box-shadow, border-radius et compagnie, je vais dire que ma préférée reste transform, pour son originalité :)
Sinon, ce livre à l'air pas mal du tout, on en sait jamais assez en CSS, que ça soit 2 ou 3 ...
Baraguiné par manureze le 04/04/11 à 10h18
manureze via Twitter
Maintenant qu'on peut avoir le choix c'est difficile d'en choisir une. je dirais box-shadow ou border-radius.
Baraguiné par clowniseb le 04/04/11 à 10h20
clowniseb via Twitter
bonjour et merci pour ce petit concours ;) c'est bien utile d'en savoir plus sur le CSS3 pour certains designs.

Perso la propriété border-radius me plait bien (de ce que j'utilise pour l'instant) car d'un côté elle évite certaines combine pour avoir des coins arrondis mais elle permet aussi de faire des formes sympas avec des border-radius différents à chaque coin d'un élément.
Baraguiné par le 04/04/11 à 10h21
border-radius comme pas mal de gens :D
Baraguiné par thibaultmartin le 04/04/11 à 10h25
thibaultmartin via Twitter
Clairement display: box :D Vraiment puissant pour enfin avoir un positionnement logique sans tableau.
Dommage par contre que comme d'hab, même sur IE9 ça ne fonctionne pas...
Baraguiné par le 04/04/11 à 10h27
propriété : Transitions!
Baraguiné par glloq8 le 04/04/11 à 10h29
glloq8 via Twitter
Border-radius et box-shadow sont de bonnes propriétés... à utiliser avec modération !
Baraguiné par daminnoux le 04/04/11 à 10h31
daminnoux sur La Ferme du Web
border-radius sans aucun doute ! Je les déjà utilisé en production avec du javascript pour IE8.
Baraguiné par jubab1 le 04/04/11 à 10h34
jubab1 via Twitter
Pour moi ca sera les transition-property ^^
Baraguiné par div1n le 04/04/11 à 10h36
div1n via Twitter
border-radius pour sûr ! avec peut être aussi le box shadow...
Baraguiné par Nico3333fr le 04/04/11 à 10h39
Nico3333fr via Twitter
Définitivement, ma propriété CSS3 préférée... ce sont les media-queries. :)
Baraguiné par Yoyo le 04/04/11 à 10h41
Yoyo sur La Ferme du Web
Border-Radius sans hésitation ;)
Mais pour moi la plus grosse avancé dans HTML5 est les canvas :)
Baraguiné par ludovicsadier le 04/04/11 à 10h44
ludovicsadier via Twitter
Oh yes, le petit dernier qui me manquait !
Pour ma part, "border-radius" sans hésiter, les arrondis sans galérer à devoir imbriquer des divs ... #quedubonheur :)

tweet : http://twitter.com/#!/ludovicsadier/status/54823247325298688

Merci pour ce concours et bonne chance à tous !
Baraguiné par julienfabre le 04/04/11 à 10h51
julienfabre via Twitter
http://www.w3.org/TR/css3-selectors/

Les nouveaux sélecteurs ! mais il y a tellement de chose
multi background image border.... finalement box-shadow et border-radius sont que des p'tits joueurs face à tout le reste !
Baraguiné par darkstars le 04/04/11 à 10h57
darkstars via Twitter
allé je tente ma chance on verra bien ^^
Baraguiné par arkdev le 04/04/11 à 10h59
arkdev sur La Ferme du Web
J'adore le fait de pouvoir placer des ombres où l'on veut sans passer par ce p*t*in de Photoshop. Et oui, je suis développeur !!! ;)
Baraguiné par pascalcanadas le 04/04/11 à 11h02
pascalcanadas via Twitter
Personnellement, je trouve la propriété box-shadow, elle permet vraiment de gagner du temps et surtout d'obtenir des effets très sympa. Je n'es pas encore trop utilisé les propriétés css3 mais il y a vraiment du potentiel. Le seul hic, mais je pense que cela est un peu normal notamment au début des nouvelles technologies c'est que les navigateurs devraient s'adapter plus au standart que de faire leur propre interprétation (je parle de IE qui ne respecte même pas les propriétés css et css2).
Baraguiné par Aither99 le 04/04/11 à 11h03
Aither99 sur La Ferme du Web
@font-face pour moi :)
mais le border-radus n'est pas mal non plus
Baraguiné par Yaninho50 le 04/04/11 à 11h03
Yaninho50 via Twitter
Border-radius évidemment ! Enfin plus besoin de retoucher les images pour faire des bords arrondis !
Et merci pour le concours :)
Baraguiné par ReBleach le 04/04/11 à 11h07
ReBleach via Twitter
Pour moi c'est incontestablement gradient, mais je dois avouerais j'adore les transitions. J'ai découvert le html5 Grace a Goetter et son (superbe) portfolio.
Bonne journée.
Baraguiné par proustibat le 04/04/11 à 11h13
proustibat via Twitter
Border-radius est intéressant ;-)
Baraguiné par Garfield le 04/04/11 à 11h21
Garfield sur La Ferme du Web
J'en veux un :)

La propriété font-face ne plait bien. Elle permet de personnaliser les fonts sur les pages sans avoir la contrainte du font-family.
Baraguiné par Alien_59 le 04/04/11 à 11h22
Alien_59 via Twitter
Pour moi c'est @font-face qui me plait le plus :)
Baraguiné par sebbarraud le 04/04/11 à 11h25
sebbarraud sur La Ferme du Web
Hello !

C'est sans aucun doute la propriété display: box qui me plait le plus ! Display: box et toutes les propriétés qui suivent (box-orient, box-flex,etc) vont vite devenir incontournable !

Bonne semaine à tous
Baraguiné par Doh-a le 04/04/11 à 11h28
Doh-a sur La Ferme du Web
Merci pour l'article et la presentation du livre.

Je retiens surtout les reflexions sur les framework. A l'heure où ceux ci sont mis en avant sur plein de sites et où même les webmasters débutants les considèrent comme bonne pratique il fait bon de enfin lire des mises en gardes/réflexions de ce type
Baraguiné par nbirckel le 04/04/11 à 11h31
nbirckel via Twitter
perso les media-queries :)
Baraguiné par deudeu le 04/04/11 à 11h38
deudeu sur La Ferme du Web
Fan également de border-radius pour éviter tableau et image d'arrondis.
Baraguiné par le 04/04/11 à 11h39
Le border-radius et box-shadow évidemment, mais aussi les background multiples !
Baraguiné par kraddle le 04/04/11 à 11h39
kraddle sur La Ferme du Web
J?apprécie les transform :rotate() qui permet d'effectuer une rotation sur un block
Baraguiné par Flayks le 04/04/11 à 11h41
Flayks via Twitter
Sans hésitation border radius et les dégradés !
Baraguiné par p418 le 04/04/11 à 11h42
p418 sur La Ferme du Web
Comme la majorité, border-radius!
Baraguiné par Helios le 04/04/11 à 11h43
Helios sur La Ferme du Web
Je ne me suis pas encore bien plongé dans les fonctionnalités CSS3, mais tout ce qui va permettre de ne plus faire du bricolage de div imbriqués est un net progrès pour moi, donc border-radius, box-shadow et les nouveautés de background.

Je sais, ça ne fais pas une seule réponse et ce n'est pas forcément du CSS3, mais c'est de l'indispensable.

Toutes les propriétés qui vont permettre un positionnement correct, sans bricolage ni prise de tête sont également une réelle avancée... en espérant que tous les navigateurs implémentent enfin un rendu identique ou presque.
Baraguiné par creartmagazine le 04/04/11 à 11h44
creartmagazine via Twitter
Pour ma part: border-radius et translate (pour réaliser des sliders sans Javascript, quel bonheur :) )
Baraguiné par CedSchoenecker le 04/04/11 à 11h44
CedSchoenecker via Twitter
les media-queries !
Baraguiné par morreelsm le 04/04/11 à 11h50
morreelsm sur La Ferme du Web
Pour moi c'est "rgba" fini la mise en place d'images pour de joli transparent
Baraguiné par mickimike le 04/04/11 à 11h52
mickimike via Twitter
"border-radius" ca évite pas mal de prise de tête de découpe d'image et l'utilisation de plusieurs div.
Baraguiné par nancyg le 04/04/11 à 11h55
nancyg sur La Ferme du Web
border-radius sans hésiter !!!
Enfin la possibilité de faire du HTML plus propre :)
Baraguiné par jon301 le 04/04/11 à 12h04
jon301 sur La Ferme du Web
border-radius a fait ses preuves depuis très longtemps :)
Baraguiné par tomseikatsu le 04/04/11 à 12h07
tomseikatsu via Twitter
Comme beaucoup, je suis assez fan de la propriété border-radius qui permet d'éviter de s'arracher les cheveux (pour ceux qui en ont encore) !
Baraguiné par le 04/04/11 à 12h09
Comme la plupart, border-radius.
Baraguiné par fvsch le 04/04/11 à 12h09
fvsch via Twitter
On va participer aussi. Alors pour la propriété CSS3, je dirais box-sizing. Cette propriété, spécifiée dans le module CSS3 Basic User Interface (implémentée d?abord par Opera puis Firefox, et ensuite dans WebKit et dans Internet Explorer 8), permet de changer de modèle de boite pour un élément:
- modèle de boite CSS 2 (box-sizing:content-box, par défaut);
- modèle de boite d'IE 5 (box-sizing:border-box), où les éventuelles bordures et padding sont retranchées de la largeur totale spécifiée avec width.

C'est une propriété qui complète très bien l'arsenal CSS 2.1 et permet ponctuellement d'en corriger un défaut (le modèle de boite restrictif). Elle a donc mon vote.

Un commentaire sur l?interview: je ne suis pas tout à fait d?accord avec Raphaël quand il dit que le module CSS3 Flexible Box Layout «remporte les suffrages». Ce module est intéressant pour le positionnement, mais limité. Il correspond bien aux besoins des interfaces applicatives, mais pas aux besoins des sites orientés contenu. Pour ces derniers, et notamment pour réaliser des mises en page «magazine», il nous faut un système différent permettant de positionner des éléments dans une grille. Tout cela est en forte évolution au CSS Working Group: Flexible Box Layout, dont une première version est déjà implémentée dans Gecko (Firefox) et Webkit (Chrome, Safari) vient d?être réécrit; et pour les systèmes de grille il y a trois propositions concurrentes, plus une proposition très récente d?Adobe pour des fonctionnalités complémentaires. Avec un peu de chance on aura à la fin de 2011 deux spécifications CSS3 «positionnement avancé»: la nouvelle version de Flexible Box Layout, et une spécification plus mature pour un système de grille. Wait and see. :)
Baraguiné par Toniob_ le 04/04/11 à 12h14
Toniob_ via Twitter
Pour moi c'est transition-property qui permet de faire de superbes effets avec un minimum de code.
Baraguiné par Twitter User le 04/04/11 à 12h20
Twitter User sur La Ferme du Web
border-radius est effectivement super pratique !
Baraguiné par pabuisson le 04/04/11 à 12h30
pabuisson via Twitter
border-radius pour moi également, même si j'avoue que j'ai grand besoin de me plonger sur toutes les autres nouveautés qu'introduit css3..!
Baraguiné par Ph3nol le 04/04/11 à 12h33
Ph3nol via Twitter
Petit coup de coeur pour le box-shadow :)
Baraguiné par kaen25 le 04/04/11 à 12h44
kaen25 via Twitter
border-radius et box-shadow à égalité
Le support rgba est vraiment un plus aussi.
Baraguiné par mrBinR le 04/04/11 à 12h47
mrBinR via Twitter
De bons ouvrages pour compléter les infos qu'on trouve que le web :)
Merci pour le concours c'est sympa :)
Baraguiné par GarfielD07 le 04/04/11 à 13h07
GarfielD07 sur La Ferme du Web
Border-radius et text-shadow vraiment sympa pour les effets flashy sur du texte!
Baraguiné par le 04/04/11 à 13h08
box-shadow et border-radius, plus besoin de jquery pour arriver a ce résultat !
Baraguiné par MaMouT le 04/04/11 à 13h10
MaMouT sur La Ferme du Web
"border-radius" pour moi!
Baraguiné par jibcobdx le 04/04/11 à 13h11
jibcobdx via Twitter
Pas vraiment une nouvelle balise css3, mais c'est la prise en charge des multiples backgrounds sur la propriété background \o/
Baraguiné par chelouvto le 04/04/11 à 13h11
chelouvto via Twitter
Les propriétés de transitions sont très sympathique, elles permettent d'éviter d'utiliser flash pour faire des effets très jolie.
Baraguiné par Frap_Info le 04/04/11 à 13h24
Frap_Info via Twitter
Je dirais border-radius, sans hésiter!
Baraguiné par red1172 le 04/04/11 à 13h31
red1172 sur La Ferme du Web
Je pense que border-radius et box-shadow, sont deux propriétés qui facilite la vie du développeur
Baraguiné par S_U_O_M_I le 04/04/11 à 13h36
S_U_O_M_I via Twitter
Border-radius - enfin :)
Baraguiné par s0yuka le 04/04/11 à 13h40
s0yuka via Twitter
Bonjour,
Pour ma part,j'ai beaucoup aimé le @font-face (découvert sur lfdw). Bien entendu les propriétés border-radius et box-shadow me sont très utiles !
Baraguiné par _CorrAn_ le 04/04/11 à 13h49
_CorrAn_ via Twitter
Pour moi, la meilleure propriété CSS, c'est le border-radius, qui fait gagner beaucoup de temps en n'ayant plus besoin de créer ses images à bords arrondis: un coup de border-radius, et voilà votre arrondi ;)
Baraguiné par AkaiKen le 04/04/11 à 13h52
AkaiKen sur La Ferme du Web
Box-shadow, comme beaucoup, car cela peut donner un cachet immédiat à une page :)
Baraguiné par le 04/04/11 à 13h58
Pour moi c'est le pseudo-element :nth-child(n) qui est le plus utile
Baraguiné par bergamelli le 04/04/11 à 13h59
bergamelli via Twitter
border-radius all the wayyyyyy !!!
Baraguiné par Kerweb le 04/04/11 à 14h03
Kerweb via Twitter
Plusieurs choses, j'en retiendrais 3 : display box, background et media queries
Baraguiné par ToonMolo le 04/04/11 à 14h04
ToonMolo sur La Ferme du Web
Une fois de plus, je vote pour la propriété border-radius
Baraguiné par kwiky le 04/04/11 à 14h07
kwiky via Twitter
border-radius mais j'ai hésité
Baraguiné par walterstephanie le 04/04/11 à 14h09
walterstephanie via Twitter
Même si je trouve que border-radius est la propriété la plus "utile" dans le sens où elle permet de se faciliter la vie et éviter pleins d'images, ma préférée reste border-image, avec laquelle on peut imaginer pleins d'effets vraiment sympas. Et puis les médias queries bien-sure, mais ça c'est ma déformation "design d'application mobile".
Baraguiné par daminoweb le 04/04/11 à 14h13
daminoweb via Twitter
Ce n'est pas une propriété mais la valeur rgba.
Baraguiné par tsunamichups le 04/04/11 à 14h13
tsunamichups sur La Ferme du Web
Pour mois et comme beaucoup d'autre c'est border-radius.
Fini les code alambiquer et "tordu" pour avoir une rendu arrondi.
C'est un gros manque du css 2 et une révolution du css 3
Baraguiné par Alex_Masson le 04/04/11 à 14h13
Alex_Masson via Twitter
Comme la majorité j'ai l'impression, c'est la propriété border-radius qui m'intéresse le plus.
Mais je demande qu'à en découvrir d'autres dans ce livre.
Baraguiné par drakni le 04/04/11 à 14h27
drakni via Twitter
Pour ma part j'aime beaucoup la propriété rgba pour la transparence, et aussi, entre autre, transform:rotate(), qui peut apporter un peu de dynamisme, tout ça sans images !

Le bouquin a l'air vraiment pas mal au vu des commentaires recueillis à droite à gauche !
Baraguiné par marcuslion66 le 04/04/11 à 14h33
marcuslion66 via Twitter
Bonjour et merci,
Pour moi border-radius comme pas mal de monde :)
Baraguiné par webaaz le 04/04/11 à 14h55
webaaz via Twitter
J'aime bien rotate, ca apporte du neuf, mais j'aime bien aussi les media queries et la gestion des champs de formulaire !
Baraguiné par rildo le 04/04/11 à 15h00
rildo sur La Ferme du Web
Box-Shadow et border-radius c'est franchement sympa
Baraguiné par gino35 le 04/04/11 à 15h08
gino35 sur La Ferme du Web
border-radius est pour moi la règle css3 à retenir.
Baraguiné par chezpilou le 04/04/11 à 15h17
chezpilou via Twitter
Border-radius us the best one !!
Baraguiné par smashou le 04/04/11 à 15h18
smashou sur La Ferme du Web
Le border-radius est évidement une avancée et puis fini les spécifiques moz-border-radius!

Les arrières plan multiples de la propriétés background et enfin: Opacity qui est simplement génial pour les fenêtres d'alerte et autres toolbox nécessaires!
Baraguiné par pixoKev le 04/04/11 à 15h19
pixoKev via Twitter
J'aime beaucoup border-radius mais ma préférée est gradient. Tout ça sans images c'est quand même génial, après il ne faut pas que ce soit la foire aux coins arrondis et dégradés non plus...
Baraguiné par GregLone le 04/04/11 à 15h19
GregLone sur La Ferme du Web
Bonjour,
dans les propriétés css3 que j'affectionne le plus et qui sont facilement dégradables dans les anciens navigateurs (comprendre : qui ne casse pas le site si non implémentées dans certains navigateurs préhistoriques), il y a principalement box-shadow car elle ne sert pas seulement à faire des ombres (bordures avancées?). Mais il y a aussi les gradient =)
Merci pour ce concours! o/
Baraguiné par dway le 04/04/11 à 15h31
dway sur La Ferme du Web
border-radius est aussi ma préférée :)
Baraguiné par 1A_Design le 04/04/11 à 15h56
1A_Design via Twitter
Bonjour, moi c'est plutôt multiple-background, vraiment très pratique pour avoir des fonds variés et moins lourds grâce aux motifs sans faire des tonnes de divs imbriquées?
Baraguiné par le 04/04/11 à 16h07
Sans hésiter une seule seconde, les backgrounds multiples ( les gradients - les deux ensembles c'est de la bombe!!)
Baraguiné par wode le 04/04/11 à 16h26
wode via Twitter
border radius sans hésiter !
Baraguiné par Erics013 le 04/04/11 à 16h51
Erics013 via Twitter
Sans aucun doute: "transition"
Cela se résume en un seul mot, genial!
Baraguiné par Schoolhead le 04/04/11 à 16h57
Schoolhead via Twitter
Pour moi c'est le glyph-orientation qui me fait plaisir.

Bonjour à vous les dijonnais au fait ! Yves, j'attends mon rosé. =)
Baraguiné par JeromeCalot le 04/04/11 à 17h01
JeromeCalot via Twitter
Pas d'originalité, mais border-radius est tellement attendu par les graphistes qui galéraient à créer / mettre à jour des boutons aux coins arrondis...
Baraguiné par graphitruc le 04/04/11 à 17h08
graphitruc via Twitter
je vote pour les transitions
Baraguiné par Rectari le 04/04/11 à 17h50
Rectari via Twitter
Clair que c'est border-radius qui fait rêver. Fini le bricolage avec des images !
Merci pour ce concours :)
Baraguiné par MamzelleAL le 04/04/11 à 18h27
MamzelleAL via Twitter
Moi je dirais border-radius ! Merci pour ce concours. J'ai également retweeté ;) http://twitter.com/MamzelleAL/status/54942181663850496
Baraguiné par Gillou63 le 04/04/11 à 18h34
Gillou63 via Twitter
box-shadow franchement ça va nous faciliter la vie
Baraguiné par le 04/04/11 à 18h47
une seule propriété ?! ^^ impossible, le font-face, le border-radius, le test-shadow.......amis developpeur web, nous sommes sur la bonne voie ^^ plus qu'a éradiquer IE et ce sera le paradis #UtpoieDuLundi
Baraguiné par Zuff le 04/04/11 à 18h59
Zuff sur La Ferme du Web
border-radius !
Baraguiné par Yuston le 04/04/11 à 19h20
Yuston via Twitter
Héhé,

border-radius se retrouve sur presque tous mes fichiers CSS, je dois en conclure que c'est ma propriété préférée.

Bref, bonne chance à tous.
Baraguiné par AlexionFR le 04/04/11 à 19h23
AlexionFR via Twitter
J'aime beaucoup le box-shadow !
Baraguiné par ggbspoiler le 04/04/11 à 19h32
ggbspoiler via Twitter
Merci pour le concours!
Le border-radius va changer la vie de beaucoup de développeur!
Baraguiné par matheoland le 04/04/11 à 19h33
matheoland via Twitter
Pour moi c'est aussi border-radius.
Très pratique et avec de très beau résultats !
Baraguiné par mvachette le 04/04/11 à 19h56
mvachette via Twitter
box-shadow ... enfin on va pouvoir arrêter de se prendre la tête pour donner du relief
Baraguiné par CyrilLamotte le 04/04/11 à 21h40
CyrilLamotte via Twitter
linear-gradient évidemment !
Baraguiné par Charlouf le 04/04/11 à 22h32
Charlouf via Twitter
Pour moi c'est font-face et border-radius!
Baraguiné par ggueno le 04/04/11 à 22h33
ggueno via Twitter
Sans aucune hésitation, border-radius !
Baraguiné par GxiGloN le 04/04/11 à 22h34
GxiGloN sur La Ferme du Web
Il faut avouer que border-radius est une propriété sympathique, mais je trouve que bien de trop de gens résument CSS3 à cette propriété.

Difficile néanmoins de sélectionner celle qui me plait le plus, même si je pense que tout ce qui a trait aux backgrounds et notamment les mulitple background va grandement aider la vie des intégrateurs !

Fini les ! Et ça, c'est quand même cool niveau lisibilité :)

En espérant avoir la chance de gagner cet ouvrage qu'il me tarde de dévorer :)
Baraguiné par HugoMacarez le 04/04/11 à 22h34
HugoMacarez via Twitter
Bonjour!
Pour moi ce sera la propriété -column ( -column-count, -column-width, ...)

(twitter.com/HugoMacarez)
Baraguiné par webactuallyfr le 04/04/11 à 22h58
webactuallyfr via Twitter
Alors personnelement je suis actuellement sur le livre de Dan Cederholm. Mais j'ai ha^te de lire celui de Raphael :)

Pour ma part c'est les transitions qui offrent de nouvelles perspective dans le design d'interface.
Même si box-shadow et text-shadow ne sont pas bien loin :p
Baraguiné par le 04/04/11 à 23h02
ajout de la transparence sur la propriété background me parait le top!
Baraguiné par durrentom le 05/04/11 à 00h21
durrentom via Twitter
Sans aucun doute : border-radius !
Baraguiné par ced478 le 05/04/11 à 00h36
ced478 sur La Ferme du Web
Pour moi la meilleur propriété css3 est je pense box-radius ;)
Baraguiné par daguins le 05/04/11 à 01h14
daguins sur La Ferme du Web
Oui pour moi aussi c'est : border-radius !!!!
en tout cas le CSS3 est une grande avancée pour le développement web. plus besoin de "s'amuser" avec des div dans tous les sens pour faire des bords arrondis etc...

Mais bien entendu je suis encore loin de tout connaître du HTML5 et du CSS3 !
D'ailleurs le prochain site que je développe sera en FULL HTML5/CSS3, un vrai bonheur à coder et surtout à apprendre à coder avec moins de prise de tête !!!

lien twitter : https://twitter.com/#!/daguins/status/55044238286659584
Baraguiné par Nath le 05/04/11 à 06h15
Nath sur La Ferme du Web
Jusqu'ici, je n'ai eu à utiliser que border-radius (qui ne l'a pas essayé ?)
Beaucoup de propriétés de style sont intéressantes (box-shadow...), mais pour d'autres comme les transitions, en dehors de la performance technique il faut vraiment en avoir l'utilité.
Baraguiné par le 05/04/11 à 09h23
J'ai hâte dans savoir plus sur les nouveaux types de positionnement, mais actuellement border-radius :p
Baraguiné par _p_e_b_ le 05/04/11 à 09h26
_p_e_b_ via Twitter
ah... petit bug sur le poste, le ET commercial ne passe pas.
donc je recommence :)

border-radius et box-shadow : incontournables ! adieur les sprites png pour gérer les arrondis et les ombrages. (sauf avec les vieux navigateurs web)
Baraguiné par VvTargate le 05/04/11 à 09h29
VvTargate via Twitter
border-radiussssssss :)

Vive html5 et css3
Baraguiné par MlleMarionBou le 05/04/11 à 09h58
MlleMarionBou via Twitter
pour moi aussi se sera border-radius, meme si je n'en connais pas beaucoup, celle ci est celle que j'utilise le plus, un de ces petits livres pourrait m'en faire découvrir d'autre.
Croisons les doigts
Baraguiné par SirGaspard le 05/04/11 à 10h00
SirGaspard via Twitter
Dans un premier temps, je dirais @font-face qui change radicalement le paysage du web depuis quelques mois.
Après, je pense que les nouveaux types de positionnement et les Medias Queries seront les bases du webdesign de demain : Davantage de souplesse et d'évolutivité (adaptation au support)
Baraguiné par SpaceshiponeWeb le 05/04/11 à 11h18
SpaceshiponeWeb via Twitter
border-radius pour améliorer l?esthétique d'un site web sans avoir recours à la transparence d'image ;)
Baraguiné par JulienItard le 05/04/11 à 11h22
JulienItard via Twitter
border-radius sans hésiter !
Baraguiné par joelmatelli le 05/04/11 à 12h15
joelmatelli via Twitter
Pour moi c'est tous les nouveaux sélecteurs.
Baraguiné par Virtuousquare le 05/04/11 à 12h29
Virtuousquare via Twitter
Le multi-background va révolutionner bien des intégrations et soigner autant de migraines d'intégrateurs. :)
Baraguiné par le 05/04/11 à 13h13
une proriété sympa : transform:matrix() qui permet de faire des effets de déformation plus que sympa
Baraguiné par le 05/04/11 à 13h22
C'est clair que border-radius est tout simplement génial, ça facilite vraiment les choses, mais mon c?ur balance encore plus entre la gestion de l'opacité et les background multiples... Allez je choisis opacity !!
Baraguiné par alecsy le 05/04/11 à 15h02
alecsy sur La Ferme du Web
Sans hésitez border-radius
Elle permet de gagner un temps fou en développement :)
Baraguiné par pango le 05/04/11 à 15h04
pango sur La Ferme du Web
Celle qui me plait le plus... Ben pour être original, border-radius :) après y'a tellement de trucs super utiles... box-shadow, text-shadow, ou encore les gradients... mmmh CSS3! (avec la voix d'Homer)
Baraguiné par le 05/04/11 à 15h05
Border-radius
Baraguiné par Nicolas le 05/04/11 à 16h19
Nicolas sur La Ferme du Web
Intéressant !

La propriété qui me plaît le plus est border-radius pour le gain de temps.
Cependant border-image, background-color (Lightness, saturation) et surtout les backgrounds multiple vont grandement éviter une perte de temps et la divite, ya bon !

http://twitter.com/#!/Kinteba/status/55273133871087616 :D
Baraguiné par XF75013 le 05/04/11 à 16h41
XF75013 sur La Ferme du Web
pour moi ce sera transform pour aller au delà de l'horizontale
Baraguiné par erf21 le 05/04/11 à 21h11
erf21 sur La Ferme du Web
border-radius comme beaucoup !
Baraguiné par NiniGeek le 05/04/11 à 21h43
NiniGeek via Twitter
Border-radius a réglé pas mal de prise de tête.
Vivement que le CSS3 soit employé à 100% sur tout les naviguateurs ^^,
et que les autres crève xD
Baraguiné par Akey le 05/04/11 à 21h51
Akey sur La Ferme du Web
Pour le moment, border-radius à la primeur sur les autres propriétés CSS3 !! :D
Baraguiné par twconcour le 05/04/11 à 21h53
twconcour via Twitter
Pour moi c'est border-radius qui permet de faire de jolie effet bien sympa https://twitter.com/#!/twconcour/status/55020813505675264
Baraguiné par iwona46 le 05/04/11 à 23h40
iwona46 via Twitter
Bonsoir ;)
merci pour ce concours, pour ma part c'est la fonction box shadow qui vaut le détour!! bonne fin de soirée ;)

http://twitter.com/#!/iwona46/status/55383713395122176
Baraguiné par Rurik le 05/04/11 à 23h54
Rurik sur La Ferme du Web
"border-radius" pour moi également! Finis les sprites!
Baraguiné par le 05/04/11 à 23h57
Merci pour ce concours

.Pour moi c'est border-radius

http://twitter.com/petitagite44/status/55388266085629952
Baraguiné par Rurik le 06/04/11 à 00h02
Rurik sur La Ferme du Web
http://twitter.com/#!/cedricruiu/status/55388171420172288
Baraguiné par Eradwen le 06/04/11 à 00h23
Eradwen sur La Ferme du Web
Pour moi ce sont les multiple backgrounds :)
Baraguiné par DJo le 06/04/11 à 09h59
DJo sur La Ferme du Web
Fin du concours, les commentaires à la suite de celui-ci ne seront pas comptabilisés ...
Baraguiné par sparttan le 06/04/11 à 10h24
sparttan sur La Ferme du Web
border-radius
Baraguiné par clowniseb le 06/04/11 à 12h10
clowniseb via Twitter
merci pour ce concours, content de faire partie des 2 gagnants, j'attendais le résultat avant de l'acheter j'ai bien fais :p
Baraguiné par nicolasdelbaer le 06/04/11 à 20h37
nicolasdelbaer via Twitter
Ma propriété préférée: le gradient, fini les images étirées !
Baraguiné par lproust le 07/04/11 à 10h13
lproust sur La Ferme du Web
border-radius !! Again =)
Baraguiné par le 22/04/11 à 02h37
Moi ce qui m'intéresse le plus c'est transform(translate:(#,#); ,.... rotation et en plus on peut faire du 3D,... Mais bon ok,... en webkit principalement.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web