close-box Documentation

PWA Bunga! CSS

pwabunga.css est le fichier CSS de base de PWA Bunga!

Contenu de PWA Bunga! CSS

Le module PWA Bunga! CSS comprend :

  • file-document pwabunga.css

Sommaire de la documentation de PWA Bunga! CSS

Comportement au défilement

Améliorations ergonomiques

Si l'utilisateur n'as pas modifié ses réglages pour minimiser la quantité d'animation ou de mouvement, on définit un effet de défilement fluide pour le comportement de défilement d'une boîte, lorsque le défilement se produit en raison de la navigation ou des API de défilement CSSOM.


@media (prefers-reduced-motion: no-preference) { 
	:root {
		scroll-behavior: smooth; 
	}
}

Héritages universels

Bonnes pratiques

On rend héritable la propriété box sizing pour tous les éléments.


*,
::before,
::after {
	box-sizing: inherit;
}

Selection

Reset

On supprime le text-shadow de la surbrillance de la sélection.


::-moz-selection {
	text-shadow: none; 
}

::selection {
	text-shadow: none;
}

L'élément root

Bonnes pratiques

On modifie le dimensionnement du modèle de boîte pour l'élément `html`.


html {
	box-sizing: border-box;
}

L'unité de valeur relative fait référence à la taille de l'élément parent. La taille de police par défaut des navigateurs est de 16 pixels. Pour un rapport de 1em/10px, nous divisons la taille par la taille par défaut : 10/16 x 100 = 62,5 %.


html {
	font-size: 62.5%;
}

Améliorations ergonomiques

On améliore la cohérence des polices par défaut pour tous les navigateurs.


html {
	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

On force la barre de défilement du navigateur à toujours être visible pour éviter les sauts gênants lorsque entre les pages qui ont/n'ont pas assez de contenu.


html {
	overflow-y: scroll;
}

On affiche la barre de défilement à masquage automatique lors des interactions avec la souris et lors des interactions tactiles et clavier.


html {
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

On rend les polices sur OSX plus cohérentes avec d'autres systèmes qui n'utilise pas l'anticrénelage sous-pixel.


html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

On supprime l'effet de surbrillance sur l'action "tapped".


html {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

On empêche l'ajustement de la taille du texte sur iOS lors du changement d'orientation.


html {
	-webkit-text-size-adjust: 100%;
}

On définit une taille de tabulations plus lisible.


html {
	tab-size: 4;
	-moz-tab-size: 4;
}

Sections

Reset

On supprime les marges pour les éléments section


body, section, nav, article, aside,
h1, h2, h3, h4, h5, h6, header, footer, address {
	margin: 0;
	padding: 0;
}

Grouping content

Améliorations ergonomiques

On empêche certains contenus de dépasser de leur contenant.


blockquote,
pre {
	max-width: 100%;
}

On améliore la cohérence des polices par défaut pour tous les navigateurs.


pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
}

Reset

On enlève les puces des listes par défaut.


ol, ul {
	list-style: none;
}

On supprime les marges pour les éléments grouping content


p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, div {
	margin: 0;
	padding: 0;
}

Text-level semantics

Normalisation

On définit la bonne valeur de text-decoration sur abbr[title] pour Chrome, Edge et Safari.


abbr[title] {
	text-decoration: underline dotted;
}

On définit la bonne valeur de font-weight sur b et strong pour Chrome, Edge et Safari.


b,
strong {
	font-weight: bolder;
}

On met la bonne valeur de font-size sur small pour Chrome, Edge et Safari.


small {
	font-size: 80%;
}

On empêche les éléments sub et sup de changer l'interlignage de la ligne sur tous les navigateurs.


sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

Améliorations ergonomiques

On supprime le délai de l'action "tapped" sur les éléments cliquables et on supprime les écarts sur le soulignement des liens.


a {
	touch-action: manipulation;
	-webkit-text-decoration-skip: objects;
}

On met le curseur d'aide aux éléments qui donnent des informations supplémentaires sur :hover.


abbr[title],
dfn[title] {
	cursor: help;
}

Afin que le texte ne dépasse pas de son bloc, on indique que les espaces doivent être conservées telles quelles et on empêche certains contenus de dépasser de leur contenant.


code {
	white-space: pre-wrap; /* 1 */
	max-width: 100%; /* 2 */
}

On améliore la cohérence des polices par défaut pour tous les navigateurs.


code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
}

Reset

On enlève le text-decoration et l'outline des liens.


a {
	outline: 0;
	text-decoration: none;
}

Embedded content

Normalisation

On modifie la couleur de remplissage des éléments svg pour qu'elle corresponde à la couleur du texte dans sur les navigateurs.


svg {
	fill: currentColor;
}

Améliorations ergonomiques

On supprime le délai de l'action "tapped" sur les éléments cliquables.


area {
	touch-action: manipulation;
}

On supprime l'écart entre les éléments audio, canevas , iframes , images, vidéos et le bas de leurs contenants.


audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

On préserve le ratio largeur/hauteur des images.


img {
	height: auto;
}

On enlève la surbrillance sur l'image lorsque l'on sélectionne et faisons glisser avec la souris.


img::-moz-selection {
	background-color: transparent;
}

img::selection {
	background-color: transparent;
}

On empêche certains contenus de dépasser de leur contenant.


img,
svg,
video {
	max-width: 100%;
}

Reset

On supprime les marges pour certains éléments de embedded content.


iframe, embed, object, param, video {
	margin: 0;
	padding: 0;
}

Tabular data

Normalisation

On supprime l'indentation des table sur Chrome et Safari et on corrige l'héritage de la couleur des bordures sur Chrome et Safari.


table {
	text-indent: 0;    
	border-color: inherit;
}

Améliorations ergonomiques

On empêche certains contenus de dépasser de leur contenant.


table,
td {
	max-width: 100%;
}

Reset

On supprime les marges pour certains éléments de tabular data.


table, caption, tr, td, th {
	margin: 0;
	padding: 0;
}

Forms

Normalisation

On Corrige l'impossibilité de styliser les éléments cliquables dans iOS et Safari.


button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

On Corrige l'apparence dans Chrome et Safari et l'outline sur Safari.


[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

On ajoute le bon alignement vertical pour Chrome et Firefox.


progress {
	vertical-align: baseline;
}

On Corrige l'impossibilité de styliser les éléments cliquables dans iOS et Safari et on change les propriétés de la police en inherit pour Safari.


::-webkit-file-upload-button {
	-webkit-appearance: button; 
	font: inherit;
}

On ajoute le bon alignement vertical pour Chrome et Firefox.


::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

Améliorations ergonomiques

On supprime le délai de l'action "tapped" sur les éléments cliquables.


button,
input,
label,
select,
textarea {
	touch-action: manipulation;
}

On ajoute le style du curseur pointer aux éléments cliquables des formulaires.


[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled),
label[for],
select {
	cursor: pointer;
}

On empêche certains contenus de dépasser de leur contenant.


input,
textarea {
	max-width: 100%;
}

On autorise uniquement le redimensionnement vertical des textarea.


textarea {
	resize: vertical;
}

Reset

On supprime l'héritage de text-transform pour Edge et Firefox.


button,
select {
	text-transform: none;
}

On reset la typo sur certains éléments pour tous les navigateurs.


button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

On supprime le padding pour Safari dans macOS.


[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

On supprime les marges pour certains éléments de forms.


form, button, input, label, select, textarea {
	margin: 0;
	padding: 0;
}

On supprime la bordure intérieure et la marge interne sur Firefox.


::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

On supprime les styles supplémentaires de :invalid sur Firefox.


:-moz-ui-invalid {
	box-shadow: none;
}

Interactive

Normalisation

On met le bon display pour l'élément summary sur Firefox.


summary {
	display: list-item;
}

Contribuer

Pour contribuer, vous pouvez utiliser les trackers de problèmes du dépôt du module PWA Bunga! CSS

Les modifications apportées sur ce seront ensuite effectuées sur le dépôt principal du projet.

Le tracker de problèmes est le canal privilégié pour signaler des bugs, des demandes de fonctionnalités et soumettre des requêtes de fusion, mais veuillez respecter les restrictions suivantes :