12 CSS tips
@julienherpin
Whois
Frontend developer @
Le CSS, c'est parfois surprenant !
Mais avec quelques petites astuces, c'est "EASY" !
tip#1
Aligner un bloc au milieu d'une page
ex : formulaire de login, ...
Euh, c'est facile ! Non ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
}
Avec une marge négative ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px; /* On retire la moitié de la largeur */
margin-top: -50px; /* On retire la moitié de la hauteur */
}
Mieux, avec une transformation ?
.container { position: relative; }
.content {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
// Remplace :
// margin-left: -50px;
// margin-top: -50px;
}IE10+
Ou en tirant dans tous les sens ?
.container { position: relative; }
.content {
width: 100px;
height: 100px;
position: absolute;
// WTF, it's ok !
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}#old
Avec Flexbox
.container {
position: relative;
height: 300px;
background: #333;
// -----
display: flex;
align-items: center;
justify-content: center;
// -----
}
.content {
width: 100px;
height: 100px;
// align-self: flex-start; -> si besoin de reset dans un contenu
// align-self: flex-end; -> si besoin de reset dans un contenu
}IE10+
tip#2
Centrer une ligne de texte verticalement
et éviter que le texte dépasse
Avec le line-height !
.heading {
/* 1 line vertical centering */
height: 60px;
line-height: 60px;
/* Ellipsis */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}tip#3
Occuper verticalement la hauteur de la page
Menu de gauche
En utilisant le viewport height
.menu {
width: 20%;
float: left;
// height: 100%; -> Non !
height: 100vh;
}IE10+
tip#4
Encapsuler des media objects
ex : Fil de commentaires
Le media object (by N. Sullivan)
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">text here</div>
</div>.media { width: 100%; }
.media__content { overflow: hidden; } // -> IMPORTANT !
.media__img {
display: block;
float: left;
margin-right: 20px;
}
Peut être encapsulé à l'infini
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">
<p>Lorem ipsum ...</p>
<!-- An other one -->
<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">Lorem ipsum ...</div>
</div>
<!-- / An other one -->
</div>
</div>Le CSS est commun
Le media object, avec Flexbox ?
.media {
/* Flexbox magic */
display: flex;
align-items: flex-start;
}
.media__img {
/*float: left; <- Not needed */
margin-right: 20px;
}
.media__content {
flex: 1;
}<div class="media">
<a href="#" class="media__img">img here</a>
<div class="media__content">text here</div>
</div>IE10+
tip#5
Besoin d'un texte flou ?
Utilisons une ombre portée
.blur {
color: transparent;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
font-size: 60px;
text-align: center;
}et un texte transparent !
IE10+
Et pourquoi pas un filtre ?
.blur {
font-size: 60px;
text-align: center;
filter: blur(5px);
}!IE
tip#6
Positionner un élément par rapport à un coin
A l'intérieur ?
.rel { position: relative; }
.abs {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
}#easy
A l'extérieur ?
.rel { position: relative; }
.abs {
width: 100px;
height: 100px;
position: absolute;
top: 0;
// right: 0;
// Use the opposite corner
left: 100%;
}
tip#7
Des blocs 16/9 responsive ?
L'aspect ratio grâce au padding
<div class="box">
<div class="content">16:9</div>
</div>.box:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%; // -> 9/16 = 0.5625
}
.box > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
16/9
tip#8
Un layout simple avec Flexbox
<div class="container">
<header>header</header>
<div class="main">
<nav>nav</nav>
<article>article</article>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>// Conteneur
.main { display: flex; }
// Contenus
nav, aside { flex: 1; }
article { flex: 2; }On profite du flex-grow !
IE10+
// Shorthand
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
// Default
flex: 0 1 auto;La propriété "flex"
- flex-grow : S'étend ou non. Si oui, indiquer le ratio.
- flex-shrink : Peut rétrécir ou non. Si oui, indiquer le ratio.
- flex-basis : Base. Avant que l'espace soit distribué.
tip#9
Pourquoi mon input sort du formulaire ?
<form class="form">
<input class="input" placeholder="hey..." type="text" />
</form>.form {
width: 500px;
padding: 20px;
}
.input {
width: 100%;
padding: 20px;
}Par défaut, ça dépasse !
<form class="form">
<input class="input" placeholder="hey..." type="text" />
</form>.form {
width: 500px;
padding: 20px;
}
.input {
width: 100%;
padding: 20px;
// On change le box-model
box-sizing: border-box;
}Changeons le box-model !
IE8+
*, *:before, *:after { box-sizing: border-box; }Allons-y franchement !
tip#10
Utiliser l'accélération matérielle ?
transform: translateZ(0);
transform: translate3d(0,0,0);
perspective: 1000; backface-visibility: hidden;Améliore la performance sur des cas particuliers.
Ne pas en abuser !
IE10+
will-change: transform;
will-change: opacity;
will-change: left, top; Une méthode plus propre ?
Chrome 36+ / Firefox 36+
Draft
tip#11
Des bordures multiples ?
box-shadow: 0 0 0 5px black, 0 0 0 10px gold, 0 0 0 15px black;Avec des ombres portées !
IE9+
tip#12
Des alignements du futur avec Flexbox ?
<div class="container">
<div>FLEX 1</div>
<div>FLEX 2</div>
<div>FLEX 3</div>
<div>FLEX 4</div>
</div>
.container {
display: flex;
flex-direction: row;
}Direction
IE10+
.container {
display: flex;
flex-direction: row-reverse;
}
.container {
display: flex;
flex-direction: column;
}Direction
IE10+
.container {
display: flex;
flex-direction: column-reverse;
}
/* Main align */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;Axes
IE10+
/* Cross align */
align-items: flex-start;
align-items: flex-end;Merci !
@julienherpin