Rétablissons l'outline - commentaires Rétablissons l'outline 2015-08-14T19:47:18Z https://openweb.eu.org/articles/retablissons-l-outline#comment2744 2015-08-14T19:47:18Z <p>Pareil que Matthieu, sauf que comme je suis feignant, j'utilise le style tout fait "Bright Focus".</p> Rétablissons l'outline 2014-02-02T15:56:10Z https://openweb.eu.org/articles/retablissons-l-outline#comment2187 2014-02-02T15:56:10Z <p>Au quotidien, je me suis fait ma CSS personnalisée pour toujours avoir un ENORME outline, que j'ai mise dans l'extension firefox Stylish. Voici mon code :</p> <div style="text-align: left;" class="spip_code" dir="ltr"><code>body a:hover:active {<br /> color: red;<br /> }<br /> <br /> body *:focus,<br /> body img:focus {<br /> outline: 3px solid red !important;<br /> outline-offset: 1px !important;<br /> -moz-outline-radius: 3px !important;<br /> }<br /> <br /> body a:focus {<br /> outline-offset: 0px !important;<br /> }<br /> <br /> body button:focus,<br /> body input[type=reset]:focus,<br /> body input[type=button]:focus,<br /> body input[type=submit]:focus {<br /> -moz-outline-radius: 5px !important;<br /> }<br /> <br /> body textarea:focus,<br /> body button:focus,<br /> body select:focus,<br /> body input:focus {<br /> outline-offset: -1px !important;<br /> }</code></div> Rétablissons l'outline 2013-10-09T07:08:38Z https://openweb.eu.org/articles/retablissons-l-outline#comment2004 2013-10-09T07:08:38Z <p>Merci, d'avoir rappelé que l'outline est très utile.<br class="autobr" /> cdlt</p> Rétablissons l'outline 2013-10-08T23:03:38Z https://openweb.eu.org/articles/retablissons-l-outline#comment2003 2013-10-08T23:03:38Z <p>Merci pour l'article, il y a là un élément de design web que je n'ai jamais tenu compte et je crois bien que je suis loin d'être le seul. Dans l'idée de concevoir un design pour tablettes, pourrait-on mettre en outline ou en évidence similaire tous les éléments cliquable d'une page pour compenser l'absence d'effet hover que procure une souris.</p> Rétablissons l'outline 2013-10-04T23:56:46Z https://openweb.eu.org/articles/retablissons-l-outline#comment1993 2013-10-04T23:56:46Z <p>Il existe carrément un site dédié à la préservation du <code class="spip_code" dir="ltr">outline</code> : <a href="http://www.outlinenone.com" class="spip_out" rel='nofollow external'>outlinenone.com</a>, ici traduit en français : <a href="http://www.outlinenone.fr" class="spip_out" rel='nofollow external'>outlinenone.fr</a></p> <p>Je suis un peu plus radicale — à tort ou à raison ? — sur le <a href="http://romy.tetue.net/678" class="spip_out" rel='nofollow external'>signalement du focus</a>, que je préfère renforcer, pour ne pas le perdre de vue, par une couleur de fond contrastée, déclarant en CSS :</p> <div style="text-align: left;" class="spip_code" dir="ltr"><code>a:focus {<br /> outline: thin dotted;<br /> background: #222222 !important;<br /> border-color: #222222 !important;<br /> color: #f8f8f8 !important;<br /> text-shadow: none;<br /> }</code></div> <p>C'est plus confortable. Dans ce cas, avec une telle couleur de fond, est-il nécessaire de préserver le <code class="spip_code" dir="ltr">outline</code>, ou peut-il être annulé ?</p> Rétablissons l'outline 2013-09-23T15:08:27Z https://openweb.eu.org/articles/retablissons-l-outline#comment1969 2013-09-23T15:08:27Z <p>@m-r-r : tiens, une idée à tester :)</p> <p>@Hervé : comme de la peste. Vivent les resets très "softs".</p> Rétablissons l'outline 2013-09-23T09:52:35Z https://openweb.eu.org/articles/retablissons-l-outline#comment1967 2013-09-23T09:52:35Z <p>Une preuve de plus qu'il faut se méfier des "reset", non ?</p> Rétablissons l'outline 2013-09-22T20:38:37Z https://openweb.eu.org/articles/retablissons-l-outline#comment1966 2013-09-22T20:38:37Z <p>Très bien ! Maintenant il ne reste qu'à essayer d'avoir des outlines qui claquent graphiquement !</p> Rétablissons l'outline 2013-09-21T11:04:55Z https://openweb.eu.org/articles/retablissons-l-outline#comment1963 2013-09-21T11:04:55Z <p>Salut,</p> <p>Même sans handicap, c'est souvent pratique de naviguer au clavier... l'absence d'outline est souvent gênant.</p> <p>Par contre, vérifier que les couleurs de chaque élément pouvant être sélectionné n'interfèrent pas avec l'outline doit être assez long, surtout une CSS chargée… <wbr />Faire correspondre les états <code class="spip_code" dir="ltr">:active</code> et <code class="spip_code" dir="ltr">:focus</code> avec <code class="spip_code" dir="ltr">:hover</code> me semble plus simple.</p> <p>Sinon, on peut aussi ajouter une animation à l'outline pour la rendre plus visible :</p> <pre><div style="text-align: left;" class="spip_code" dir="ltr"><code>@keyframes outline-anim {<br /> 0% { outline-offset: .10em; }<br /> 50% { outline-offset: .20em; }<br /> }<br /> <br /> :focus {<br /> outline: thin dotted red;<br /> outline-offset: .1em;<br /> animation: outline-anim 1s 0ms infinite alternate;<br /> }</code></div></pre>