Pseudo-\u00e9l\u00e9ments before<\/code> et after<\/code> sur un champ de formulaire.<\/h2>\nEn travaillant sur un formulaire HTML5, j’ai souhait\u00e9 automatiser la pr\u00e9sentation classique des champs requis pr\u00e9c\u00e9d\u00e9s ou suivis d’une petite \u00e9toile pour signifier le besoin d’information.
\nJe me suis donc tourn\u00e9 vers les pseudo-\u00e9l\u00e9ments before<\/code> et after<\/code>, plus pr\u00e9cis\u00e9ment after<\/code> afin de proposer quelque chose dans ce go\u00fbt :<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/01\/champ-input-required-css.png\" "\\"\\"")
<\/p>\n
Ma tentative de code \u00e9tait la suivante (pour ce qui est du positionnement) :<\/p>\n
[required]:after { \r\n content: \"*\";\r\n position: absolute;\r\n top:0; right:0;\r\n width: 15px; height: 15px;\r\n}<\/code><\/pre>\nEn fait \u00e7a ne fonctionne pas. after<\/code> et before<\/code> ne fonctionnent pas sur les \u00e9l\u00e9ments de formulaire.<\/p>\nLes animations sur before<\/code> et after<\/code> sur Webkit<\/h2>\nSi vous essayez ce type de code sur Webkit, rien ne bougera.<\/p>\n
div:before {\r\n width: 200px;\r\n -webkit-transition: width 1s;\r\n}\r\ndiv:hover:before {\r\n width: 240px;\r\n}<\/code><\/pre>\nC’est probablement un probl\u00e8me qui sera corrig\u00e9 dans une des prochaines versions de Chrome\/Safari, mais pour le moment sous Safari 5.1.2 et Chrome 16 cette technique ne fonctionne pas.
\nVous aurez plus de d\u00e9tails dans un article que je pr\u00e9pare sur la r\u00e9alisation d’un slideshow en HTML5 et CSS3<\/a>. Comparez Chrome et Firefox sur la d\u00e9mo suivante.<\/p>\nD\u00e9monstration <\/a> et D\u00e9monstration<\/a><\/p>\n@keyframes<\/code> c’est vraiment trop fort… non mais vraiment!<\/h2>\nLa valeur d’une propri\u00e9t\u00e9 d\u00e9finie lors d’une animation est tellement prioritaire qu’il est impossible de l’\u00e9craser.
\nVoici par exemple, un code qui aurait pour objectif d’animer un \u00e9l\u00e9ment positionn\u00e9. Au survol du parent de cet \u00e9l\u00e9ment, nous arr\u00eatons l’animation, et nous repla\u00e7ons l’\u00e9l\u00e9ment \u00e0 sa position d’origine :<\/p>\n
div {\r\n position: absolute;\r\n top:0; left:0;\r\n width: 100px; height: 100px;\r\n background: #999;\r\n animation: 10s anim infinite;\r\n}\r\n@keyframes anim {\r\n 0%, 100% { left: 0; top:0; }\r\n 25% { left: 200px; top:0 }\r\n 50% { left: 200px; top:200px }\r\n 75% { left:0; top:200px; }\r\n}\r\nbody:hover div {\r\n animation-play-state: paused;\r\n top:0 !important; \/* \"important\" est inutile ici *\/\r\n left:0 !important;\r\n}<\/code><\/pre>\nCette m\u00e9thode est totalement inutile. Il suffit de voir la d\u00e9monstration, sur laquelle j’ai volontairement rajout\u00e9 un effet de transition (visible uniquement sur Firefox) pour vous pr\u00e9senter l’ind\u00e9cision du bloc \u00e0 trouver sa position.<\/p>\n
D\u00e9monstration<\/a><\/p>\nAttention \u00e0 votre mani\u00e8re d’utiliser @keyframes<\/code><\/h2>\nJ’ai d\u00e9j\u00e0 mentionn\u00e9 l’utilisation des @keyframes<\/code> et ce que je pensais \u00eatre une bonne pratique dans leur mise en place.
\nVoici l’article qui y fait mention : Comment bien utiliser les keyframes en CSS3<\/a>
\nPour r\u00e9sumer : l’\u00e9l\u00e9ment qui profite d’une animation ne doit pas devenir invisible ou inutilisable pour les navigateurs qui ne comprennent pas cette animation.<\/p>\nLe champ de formulaire de type search<\/code> est diff\u00e9rent…<\/h2>\nHey oui ! Il poss\u00e8de une appearance<\/code> de type searchfield<\/code> et non de type textfield<\/code>. De plus, sous Webkit, le type de boite est border-box<\/code>.
\nCe type signifie que lorsque vous d\u00e9finissez une largeur de 200 pixels, une marge interne de 20 pixels et une bordure de 1 pixel, ne vous attendez pas \u00e0 avoir un champ de 242 pixels de large, mais bien un champ de 200 pixels de large.
\nPour \u00e9craser ce style par d\u00e9faut de Webkit, voici une base CSS :<\/p>\n[type=\"search\"] {\r\n -webkit-box-sizing: content-box;\r\n -webkit-appearance: textfield; \/* optionnel *\/\r\n}<\/code><\/pre>\n
after<\/code> sur un champ de formulaire.<\/h2>\nEn travaillant sur un formulaire HTML5, j’ai souhait\u00e9 automatiser la pr\u00e9sentation classique des champs requis pr\u00e9c\u00e9d\u00e9s ou suivis d’une petite \u00e9toile pour signifier le besoin d’information.
\nJe me suis donc tourn\u00e9 vers les pseudo-\u00e9l\u00e9ments before<\/code> et after<\/code>, plus pr\u00e9cis\u00e9ment after<\/code> afin de proposer quelque chose dans ce go\u00fbt :<\/p>\n<\/p>\n
Ma tentative de code \u00e9tait la suivante (pour ce qui est du positionnement) :<\/p>\n
[required]:after { \r\n content: \"*\";\r\n position: absolute;\r\n top:0; right:0;\r\n width: 15px; height: 15px;\r\n}<\/code><\/pre>\nEn fait \u00e7a ne fonctionne pas. after<\/code> et before<\/code> ne fonctionnent pas sur les \u00e9l\u00e9ments de formulaire.<\/p>\nLes animations sur before<\/code> et after<\/code> sur Webkit<\/h2>\nSi vous essayez ce type de code sur Webkit, rien ne bougera.<\/p>\n
div:before {\r\n width: 200px;\r\n -webkit-transition: width 1s;\r\n}\r\ndiv:hover:before {\r\n width: 240px;\r\n}<\/code><\/pre>\nC’est probablement un probl\u00e8me qui sera corrig\u00e9 dans une des prochaines versions de Chrome\/Safari, mais pour le moment sous Safari 5.1.2 et Chrome 16 cette technique ne fonctionne pas.
\nVous aurez plus de d\u00e9tails dans un article que je pr\u00e9pare sur la r\u00e9alisation d’un slideshow en HTML5 et CSS3<\/a>. Comparez Chrome et Firefox sur la d\u00e9mo suivante.<\/p>\nD\u00e9monstration <\/a> et D\u00e9monstration<\/a><\/p>\n@keyframes<\/code> c’est vraiment trop fort… non mais vraiment!<\/h2>\nLa valeur d’une propri\u00e9t\u00e9 d\u00e9finie lors d’une animation est tellement prioritaire qu’il est impossible de l’\u00e9craser.
\nVoici par exemple, un code qui aurait pour objectif d’animer un \u00e9l\u00e9ment positionn\u00e9. Au survol du parent de cet \u00e9l\u00e9ment, nous arr\u00eatons l’animation, et nous repla\u00e7ons l’\u00e9l\u00e9ment \u00e0 sa position d’origine :<\/p>\n
div {\r\n position: absolute;\r\n top:0; left:0;\r\n width: 100px; height: 100px;\r\n background: #999;\r\n animation: 10s anim infinite;\r\n}\r\n@keyframes anim {\r\n 0%, 100% { left: 0; top:0; }\r\n 25% { left: 200px; top:0 }\r\n 50% { left: 200px; top:200px }\r\n 75% { left:0; top:200px; }\r\n}\r\nbody:hover div {\r\n animation-play-state: paused;\r\n top:0 !important; \/* \"important\" est inutile ici *\/\r\n left:0 !important;\r\n}<\/code><\/pre>\nCette m\u00e9thode est totalement inutile. Il suffit de voir la d\u00e9monstration, sur laquelle j’ai volontairement rajout\u00e9 un effet de transition (visible uniquement sur Firefox) pour vous pr\u00e9senter l’ind\u00e9cision du bloc \u00e0 trouver sa position.<\/p>\n
D\u00e9monstration<\/a><\/p>\nAttention \u00e0 votre mani\u00e8re d’utiliser @keyframes<\/code><\/h2>\nJ’ai d\u00e9j\u00e0 mentionn\u00e9 l’utilisation des @keyframes<\/code> et ce que je pensais \u00eatre une bonne pratique dans leur mise en place.
\nVoici l’article qui y fait mention : Comment bien utiliser les keyframes en CSS3<\/a>
\nPour r\u00e9sumer : l’\u00e9l\u00e9ment qui profite d’une animation ne doit pas devenir invisible ou inutilisable pour les navigateurs qui ne comprennent pas cette animation.<\/p>\nLe champ de formulaire de type search<\/code> est diff\u00e9rent…<\/h2>\nHey oui ! Il poss\u00e8de une appearance<\/code> de type searchfield<\/code> et non de type textfield<\/code>. De plus, sous Webkit, le type de boite est border-box<\/code>.
\nCe type signifie que lorsque vous d\u00e9finissez une largeur de 200 pixels, une marge interne de 20 pixels et une bordure de 1 pixel, ne vous attendez pas \u00e0 avoir un champ de 242 pixels de large, mais bien un champ de 200 pixels de large.
\nPour \u00e9craser ce style par d\u00e9faut de Webkit, voici une base CSS :<\/p>\n[type=\"search\"] {\r\n -webkit-box-sizing: content-box;\r\n -webkit-appearance: textfield; \/* optionnel *\/\r\n}<\/code><\/pre>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/01\/required-url-type.png\" "\\"\\"")
<\/p>\n