Rétablissons l'outline - commentairesRétablissons l'outline2015-08-14T19:47:18Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment27442015-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'outline2014-02-02T15:56:10Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment21872014-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 class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>body a:hover:active { color: red;
} body *:focus,
body img:focus { outline: 3px solid red !important; outline-offset: 1px !important; -moz-outline-radius: 3px !important;
} body a:focus { outline-offset: 0px !important;
} body button:focus,
body input[type=reset]:focus,
body input[type=button]:focus,
body input[type=submit]:focus { -moz-outline-radius: 5px !important;
} body textarea:focus,
body button:focus,
body select:focus,
body input:focus { outline-offset: -1px !important;
}</code></pre></div>Rétablissons l'outline2013-10-09T07:08:38Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment20042013-10-09T07:08:38Z<p>Merci, d'avoir rappelé que l'outline est très utile.<br class="autobr">
cdlt</p>Rétablissons l'outline2013-10-08T23:03:38Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment20032013-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'outline2013-10-04T23:56:46Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment19932013-10-04T23:56:46Z<p>Il existe carrément un site dédié à la préservation du <code class="spip_code spip_code_inline" 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 class="precode"><pre class="spip_code spip_code_block" dir="ltr" style="text-align:left;"><code>a:focus { outline: thin dotted; background: #222222 !important; border-color: #222222 !important; color: #f8f8f8 !important; text-shadow: none;
}</code></pre></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 spip_code_inline" dir="ltr">outline</code>, ou peut-il être annulé ?</p>Rétablissons l'outline2013-09-23T15:08:27Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment19692013-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'outline2013-09-23T09:52:35Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment19672013-09-23T09:52:35Z<p>Une preuve de plus qu'il faut se méfier des "reset", non ?</p>Rétablissons l'outline2013-09-22T20:38:37Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment19662013-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'outline2013-09-21T11:04:55Zhttps://openweb.eu.org/articles/retablissons-l-outline#comment19632013-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 spip_code_inline" dir="ltr">:active</code> et <code class="spip_code spip_code_inline" dir="ltr">:focus</code> avec <code class="spip_code spip_code_inline" 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><code>@keyframes outline-anim { 0% { outline-offset: .10em; } 50% { outline-offset: .20em; }
} :focus { outline: thin dotted red; outline-offset: .1em; animation: outline-anim 1s 0ms infinite alternate;
}</code></pre>