css - Offirmo-team/wiki GitHub Wiki

Cascading Style Sheets : feuilles de style en cascade. Voir aussi design, html, javascript, svg, bootstrap css, tachyons, famo.us, blueprint css, compile to css...

Introduction

Concepts

:root {
   --safe-area-inset-top:    env(safe-area-inset-top,    0px);
}

[data-o-theme="dark--colorhunt212"] {
   --o⋄dtoken⁚fg--h: 42;
}

.block {}
.block__element {}
.block--modifier {}

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}
<body class="o⋄top-container" data-o-theme="dark--default">

Liens rapides

Tools

Nouveautés:

Introduction

Références :

Misc

Advocacy

Apprendre

Sécurité

https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/

Architecture

resets

(cf le mien)

org

frameworks

Bases

Déclarer les styles

Plusieurs moyens, cf. http://www.w3schools.com/css/css_howto.asp :

  • utiliser une feuille de style '*.css' et la référencer dans le document HTML par :
<link rel="stylesheet" type="text/css" href="style.css" />
  • Déclarer les styles directement dans la page html :
<style type="text/css">
...
</style>
  • Déclarer le style à l'intérieur de l'élément à styler :
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
element.style.opacity = 1
// https://stackoverflow.com/a/13883978/587407

// if you want to add css text
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'content';
document.getElementsByTagName('head')[0].appendChild(style);

// if you want to add css file
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'css/my.css');
document.getElementsByTagName('head')[0].appendChild(link);

variables / calc

		:root {
			--bg: white;
			--fg: black;
			--font: -apple-system, BlinkMacSystemFont, "lucida grande", roboto, noto, ubuntu, sans-serif;
			--scale: 1.5;
		}

		* {
			background-color: var(--bg);
			color: var(--fg);
			font-family: var(--font);
		}

		main {
			transform: scale(var(--scale));
			transform-origin: 0px 0px;
		}
// change a CSS variable
document.documentElement.style.setProperty(
  '--omr⋄ui__bottom-menu--selected-reverse-index',
  css_selected_bottom_menu_value,
)

// read a CSS variable
getComputedStyle(document.documentElement).getPropertyValue('--my-variable-name')
// env = not possible, use a var https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/

fonctions

Organisation

Unités

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

  • absolutes ⚠️ au scaling via font, utiliser rem?
    • px
    • autres: cm, mm, Q, in, pc, pt ⚠️ non recommandé à part print
  • relatives
    • % ⚠️ dangereux car relatif au parent et souvent besoin d'un parent avec une taille explicite
    • em ⚠️ dangereux du au "compounding cascade conundrum", préferer rem
    • rem bien ⚠️ se rappeler que certains utilisateurs changent la root font size pour zoomer
    • vw, vh, vmin, vmax ⚠️ attention mobile browsers https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/
      • il faut plutôt utiliser: dynamic(dvw, dvh), small(svw, svh), large(lvw, lvh)=(dvw, dvh)
        • semantic = inline, block: (vi, vb), large(lvi, lvb), small(svi, svb) max: dvmin, dvmax etc.
      • 1vw is 1% of the viewport width
      • 1vh is 1% of the viewport height
    • ex x-height of the element's font
    • ch The advance measure (width) of the glyph "0" of the element's font
    • lh, rlh Line height of the element ⚠️ not supported

Identifier les éléments

Classes et IDs :

<div class="hentry" id="post-777">

On peut aussi donner plusieurs classes :

<span class="meta-prep meta-prep-author">Publié le</span>

Sélecteurs

intégration javascript

http://davidwalsh.name/css-animation-callback

Recettes (grands classiques)

bonnes couleurs

Navy #001f3f
Blue #0074D9
Aqua #7FDBFF
TEAL #39CCCC
OLIVE #3D9970
GREEN #2ECC40
LIME #01FF70
YELLOW #FFDC00
ORANGE #FF851B
RED #FF4136
MAROON #85144b
FUCHSIA #F012BE
PURPLE #B10DC9
BLACK #111111
GRAY #AAAAAA
SILVER #DDDDDD

colors

layout

border, margin, padding

marge, padding et spacing

Def

padding: tous;
padding: haut/bas gauche/droite;
padding: haut     gauche/droite   bas;
padding: haut     droite          bas   gauche;  (sens des aiguilles d'une montre)

border

border: width style colo
border: solid 1px gray;

ou

border-style: solid;
border-color: gray;
border-width: 1px 0px 0px 1px;

Coins arrondis

Avancé

forms

https://jonathan-harrell.com/advanced-css-form-styling/

positionnement

centrage

horizontal

text-align: center ok avec display: block

vertical

flex !

alignements droite et gauche

http://stackoverflow.com/questions/1062783/css-left-and-right-alignment-on-the-same-line/5329340

stylage des liens

http://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html

  • enlever le soulignement
a:hover {
  text-decoration: none;
}
  • couleurs
a:link,
a:visited {color: var(--o⋄color__co212__blue);}
a:hover,
a:active {color: red;}

liste plate

ul {
  list-style-type: none;
  display: inline;
}
li {
  width: 50px;
  display: inline-block;
  text-align: center;
}

liste custom

http://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or

overflow

Tous: https://www.brunildo.org/test/Overflowxy2.html

Texte monoligne avec ellipse si dépassement

.title {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Typographie

Voir aussi typographie

"typography is impossible" +++ https://medium.engineering/typography-is-impossible-5872b0c7f891

polices / fontes

Bonnes combos :

font-family: "Consolas", "Lucida console", monospace;
  • Sans serif :
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Microsoft :
font-family: "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol", "Helvetica Neue", "BBAlpha Sans", "S60 Sans", "Arial", sans-serif;

taille

font-size: medium;
color: red;

bold & italic

gras et italique, malgré leur apparente proximité, sont gérés par des balises CSS totalement différentes : http://archivist.incutio.com/viewlist/css-discuss/6136

font-style: italic;
font-weight: bold;

caps

http://stackoverflow.com/questions/2438122/font-variantsmall-caps-vs-text-transformcapitalize

font-variant:small-caps;
text-transform:capitalize;

text transform

http://reference.sitepoint.com/css/text-transform

text-transform:capitalize
   transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document
text-transform:lowercase
   transforms all characters to lowercase
text-transform:none
   produces no capitalization effect at all
text-transform:uppercase
   transforms all characters to uppercase

outils

Avancé

text-rendering: optimizeLegibility;

à trier

font-stretch: normal
line-height: normal

scroll interne

http://css-tricks.com/almanac/properties/o/overflow/

bien utilisé en conjonction avec display flex

curseurs

http://www.commentcamarche.net/faq/9119-changer-l-aspect-du-curseur-en-css

.clickable {
  cursor:  pointer;
}
  • auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
  • default : Curseur par défaut du navigateur.
  • pointer : Curseur en forme de main avec le doigt déplié.
  • text : Curseur d'édition de texte.
  • help : Curseur d'aide.
  • wait : Curseur d'attente
  • progress : Curseur de progression.
  • move : Curseur de déplacement.
  • crosshair : Curseur en forme de croix.

Tables

	<table>
		<thead>
			<tr><th></th><th>XX</th><th>YY</th></tr>
		</thead>
		<tbody>
			<tr><th>AA</th><td><div>Foo</div></td><td><div>bar</div></td></tr>
			<tr><th>BB</th><td><div>baz</div></td><td><div>42</div></td></tr>
		</tbody>
	</table>

images

background

animations

Avancé

coming features

https://css-tricks.com/next-gen-css-container/

hamburger

https://dev.to/tongrhj/the-mistake-developers-make-when-coding-a-hamburger-menu-1deg

holy albatross

https://heydonworks.com/article/the-flexbox-holy-albatross/

generative art

détection d'erreur en CSS

https://css-tricks.com/snippets/css/css-diagnostics/

Transformer n'importe quoi en bouton et un bouton en n'importe quoi

.button-like {
  cursor: pointer;
  user-select: none;
}

.foo button {
  /* button used for semantic reasons, remove its styling */
  width: 100%;
  border: none;
  color: inherit;
  background: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

Outils

À trier

mode d'affichage (display)

layout flex / flexbox / grid

Header / content / footer

.container {
  position: absolute;
  top: 0;
  right: 0;

  height: 100vh;

  display: flex;
  flex-direction: column;
}

.header { height: 132px; }
.content {
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: scroll;
}
.footer { height: 64px; }

Dimensions

Pleine page

Difficile d'occuper toute la page par défaut. Pose particulièrement problème avec chrome. Solution : http://www.geekicon.net/thinktank/index.shtml/article/643

Couleurs

divers

!important

http://babylon-design.com/le-hack-css-important/

Problèmes rencontrés

...

Test footer

⚠️ **GitHub.com Fallback** ⚠️