KNACSS/doc/09-misc.md

60 lines
1.3 KiB
Markdown
Raw Permalink Normal View History

2015-03-09 16:53:04 +01:00
# Divers
La feuille de style "fourre-tout" de KNACSS, où l'on retrouve des règles pratiques dans certains contextes, mais pas suffisamment universelles pour être appliquées par défaut dans un framework.
## Liens d'évitement
Les [liens d'évitement](http://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.html) sont prévus pour faciliter la navigation au clavier, ils sont indispensable dans une optique de parfaite accessibilité.
KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils deviennent visibles lorsque la touche `tab` est utilisée.
```css
.skip-links {
position: absolute;
}
.skip-links a {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
padding: 0.5em;
background: black;
color: white;
text-decoration: none;
}
.skip-links a:focus {
position: static;
overflow: visible;
clip: auto;
}
```
## Césures
2016-09-21 11:52:46 +02:00
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "$tiny" est atteint.
2015-03-09 16:53:04 +01:00
2016-09-21 11:52:46 +02:00
```
// hyphens on tiny screens
@media (max-width: $tiny) {
2015-03-09 16:53:04 +01:00
/* you shall not pass */
div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
2016-09-21 11:52:46 +02:00
hyphens: auto;
2015-03-09 16:53:04 +01:00
}
}
2016-09-21 11:52:46 +02:00
// use .no-wrapping to disallow hyphens on tiny screens
@media (max-width: $tiny) {
.no-wrapping {
word-wrap: normal;
hyphens: manual;
}
2015-03-09 16:53:04 +01:00
}
```