URL: https://linuxfr.org/suivi/kbd
Title: kbd
Authors: Gil Cot ✔
Date: 2022年03月11日T04:52:46+01:00
License: CC By-SA
Tags: 
Score: 0
J'ai voulu utiliser [récemment](https://linuxfr.org/users/gilcot/liens/vim-users-be-like#comment-1885660) (mais aussi plusieurs autre fois, surtout quand je parle de clavier) la balise [`kbd`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/kbd) pour lequel il n'y a pas de balisage Markdown... Malheureusement, le rendu n'est jamais au rendez-vous `:-(` Je propose de rajouter l'habillage minimal proposé par [la page de doc de Mozilla](https://developer.mozilla.org/fr/docs/Web/HTML/Element/kbd) :
```css
kbd, button {
 border-radius: 3px;
 padding: 1px 2px 0;
 border-width: thin;
 border-style: inset;
 white-space: nowrap;
 text-align: center;
 text-decoration: none;
}
```
Je rajouterai bien aussi quelque chose comme
```css
button:hover, button:active, button:focus, 
kbd:hover, kbd:active, kbd:focus, {
 background-color: inherit;
 filter: invert(0.9);
 border-style: outset;
}
kbd:disabled, button:disabled {
 color: inherit;
 filter: invert(0.3);
 border-style: ridge;
 border-color: gray;
}
kbd[title], button[title] {
 cursor: help;
}
```
On peut bien entendu pousser le bouchon plus loin, comme [ci](https://github.com/michaelhue/keyscss) et [là](https://shhdharmen.github.io/keyboard-css/), mais j'ai essayé de proposer quelque qui pourrait s'intégrer avec toutes les feuilles de styles présentes. 
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/suivi/kbd.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/suivi/kbd.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>