{"id":2137,"date":"2004-07-27T14:43:22","date_gmt":"2004-07-27T14:43:22","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2137"},"modified":"2004-07-27T14:43:22","modified_gmt":"2004-07-27T14:43:22","slug":"147-petits-trucs-css-a-utiliser-les-plus-souvent-possible","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/147-petits-trucs-css-a-utiliser-les-plus-souvent-possible\/","title":{"rendered":"Petits trucs CSS \u00e0 utiliser les plus souvent possible"},"content":{"rendered":"

L’utilisabilit\u00e9 ne tient parfois qu’\u00e0 quelques petits trucs tout b\u00eates. Je connais quelques petits trucs qui permettent d’am\u00e9liorer la convivialit\u00e9 mais j’oublie parfois de les utiliser: c’est l’occasion de les rassembler dans un billet (et une feuille de style) pour s’en souvenir dans le futur. <\/p>\n

<\/p>\n

Les liens<\/h3>\n

Occupons nous d’abord des liens en affichant la langue du document point\u00e9: <\/p>\n

  a[hreflang]:after{ \tcontent: \"\\0000a0[\" attr(hreflang) \"]\"; } <\/code> <\/pre>\n
Raccourcis clavier<\/h3>\n
De la m\u00eame mani\u00e8re, les raccourcis clavier peuvent \u00eatre affich\u00e9s:<\/p>\n
  a[accesskey]:after{ \tcontent: \"\\0000a0[alt+\" attr(accesskey) \"]\"; } <\/code> <\/pre>\n
Acronymes et abr\u00e9viations<\/h3>\n
On peut ensuite am\u00e9liorer l’affichage des acronymes et abr\u00e9viations en changeant le curseur pour indiquer que la d\u00e9finition est disponible dans l’attribut title<\/code><\/p>\n
  acronym, abbr{ \tborder-bottom: 1px dotted; \tcursor : help; } <\/code> <\/pre>\n
Él\u00e9ments de formulaire<\/h3>\n
On peut \u00e9galement appliquer cette m\u00e9thode aux label<\/code> pour indiquer que le clic sur celui-ci donnera le focus \u00e0 l’\u00e9lement de formulaire li\u00e9:<\/p>\n
  label{ \tcursor: pointer; \tcursor: hand; \/* pour IE *\/ } <\/code> <\/pre>\n
Une autre fa\u00e7on d’am\u00e9liorer un formulaire est de surligner le champ qui poss\u00e8de le focus de cette mani\u00e8re:<\/p>\n
  input[type=text]:focus, textarea:focus{ \tborder: 2px solid; } <\/code> <\/pre>\n
Vous les d\u00e9sirez, vous pouvez t\u00e9l\u00e9charger la feuille de style compl\u00e8te<\/a>. Si vous aussi avez des petits trucs, n’h\u00e9sitez pas \u00e0 partager!<\/p>\n","protected":false},"excerpt":{"rendered":"
 L’utilisabilit\u00e9 ne tient parfois qu’\u00e0 quelques petits trucs tout b\u00eates. Je connais quelques petits trucs qui permettent d’am\u00e9liorer la convivialit\u00e9 mais j’oublie parfois de les utiliser: c’est l’occasion de les rassembler dans un billet (et une feuille de style) pour s’en souvenir dans le futur. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2137"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2137"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2137\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}