Openweb.eu.org

Rétablissons l'outline

Olivier Nourry — 2015-08-14T19:47:18Z

Pareil que Matthieu, sauf que comme je suis feignant, j'utilise le style tout fait "Bright Focus".

Rétablissons l'outline

Matthieu Faure — 2014-02-02T15:56:10Z

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 :

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;
}

Rétablissons l'outline

tigoud — 2013-10-09T07:08:38Z

Merci, d'avoir rappelé que l'outline est très utile.
cdlt

Rétablissons l'outline

Serge — 2013-10-08T23:03:38Z

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.

Rétablissons l'outline

tetue — 2013-10-04T23:56:46Z

Il existe carrément un site dédié à la préservation du outline : outlinenone.com, ici traduit en français : outlinenone.fr

Je suis un peu plus radicale — à tort ou à raison ? — sur le signalement du focus, que je préfère renforcer, pour ne pas le perdre de vue, par une couleur de fond contrastée, déclarant en CSS :

a:focus { outline: thin dotted; background: #222222 !important; border-color: #222222 !important; color: #f8f8f8 !important; text-shadow: none;
}

C'est plus confortable. Dans ce cas, avec une telle couleur de fond, est-il nécessaire de préserver le outline, ou peut-il être annulé ?

Rétablissons l'outline

Nicolas Hoffmann — 2013-09-23T15:08:27Z

@m-r-r : tiens, une idée à tester :)

@Hervé : comme de la peste. Vivent les resets très "softs".

Rétablissons l'outline

Hervé Renault — 2013-09-23T09:52:35Z

Une preuve de plus qu'il faut se méfier des "reset", non ?

Rétablissons l'outline

Axel — 2013-09-22T20:38:37Z

Très bien ! Maintenant il ne reste qu'à essayer d'avoir des outlines qui claquent graphiquement !

Rétablissons l'outline

m-r-r — 2013-09-21T11:04:55Z

Salut,

Même sans handicap, c'est souvent pratique de naviguer au clavier... l'absence d'outline est souvent gênant.

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… Faire correspondre les états :active et :focus avec :hover me semble plus simple.

Sinon, on peut aussi ajouter une animation à l'outline pour la rendre plus visible :

@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;
}