Here could be a CSS boilerplate for any project:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid orange;
font-family: sans-serif;
}
Using * we are targeting all elements.
margin and padding properties set to 0 are for cancelling default browser margin and padding (see this previous article). Remember:
margin: 0 auto;
box-sizing property is new to me. It sets how the total width and height of an element is calculated (this explanation and others as well are from MDN Web docs, completed by W3Schools): it can be either unrestricted or restricted to the parent's container.
.box {
width: 350px;
border: 10px solid black;
}
renders a box that is 350 (box width) + 10 (right border ) +10 (left border) = 370px wide.
This means that you may have elements sharing a same width and height but if they have different paddings and/or borders, their total size will be different.
.box {
width: 350px;
border: 10px solid black;
}
renders a box that is 350px wide. This makes the world a little easier to live in, dosen't it?border property to debug positioning drama - you should of course delete or comment (just in case haha) this line for going-live and chose a good contrasting color . I confess, when it comes to add some CSS I often feel not knowing why it's not behaving as expected. So just like many fellows, I'm adding borders to elements and yes, it helps a lot. To avoid repeating it, I put it inside the all selector (*).
font-family property to sans-serif just to make a first step out of raw HTML, it's totally subjective.
I recently discovered about Font Awesome and Unicode emojis. I thought: this a great way to have images without actually hosting them! As I'd like my projects to require a minimum of ressources that may suit my needs. But wait. I'd like these projects to also be as accessible as possible. How can you achieve that when this HTML element (for font awesome) and character (for Unicode emoji) are not HTML images (<img>) and therefore cannot have an alt attribute containing the relevant alternative text?
Let's dig this out!
Well, for Font Awesome, the answer is on their website, they have a dedicated section! It is beautifully sumed up on Upyouray11.com so I'll just try to sum up the sum up, so to have a reference somewhere on my own blog.
Hide it from assistive technologies with aria-hidden attribute, value true.
<i aria-hidden="true" class="fas fa-car"></i>
Hide the icon itself but indicate the link purpose (menu, home, cart...) with aria-label attribute on the action HTML element
<a href="/" aria-label="Home">
 <i aria-hidden="true" class="fas fa-home"></i>
</a>
Hide the alternative text in a span element via CSS so it's dedicated to assistive technologies
HTML would be
<i aria-hidden="true" class="fas fa-plant" title="Vegetarian"></i> <span class="screen-reader-only">Vegetarian</span>
Note that we are adding a title attribute to help sighted mouse users
CSS would be
.screen-reader-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
Hide it from assistive technologies with aria-hidden attribute, value true in an additionnal span element:
<span aria-hidden="true">📖</span>
Nest the emoji into a span element and give it a role attribute, value img and the alternative text in aria-label attribute's value:
<span role="img" aria-label="open book">📖</span>
Now, let's apply this in this blog's contents!
I still can't remember wich property apply to which axis so let's build a cheat-set! Again, many thanks to FreeCodeCamp courses for the detailed explanations.
For starters, in our HTML document we'll need a container as well as children boxes. For instance:
<body>
<main>
<section>
<h2>section 1</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
Here the container is main and it's children boxes are section. Let's tell the browser how to position elements on the page:
main {
display: flex;
justify-content: space-evenly;
}
Explanations & other possibilites
First thing first, we have to declare we're using the flex model. Use display property value flex for that.
Main axis
The main axis is declared with flex-direction property:
The justify-content property determines how the items inside a flex container are positioned along the main axis. It can take this values (find all on mdn web docs):
The flex-wrap property determines how the flex items behave when the flex container is too small. Otherwise, items will shrink if needed. It can take this values:
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. It can take one or two lenght value(s) (such as 1em for instance) or percentage value(s).
Cross axis
The align-items property controls alignment of all items on the cross axis. It can take this values:
Here's a list of screen sizes by device:
Another set:
(Thanks FreeCodeCamp!)
In the CSS document, place the @media rule after the first no-rule is applied. For instance:
main {
width: 55%;
max-width: 400px;
}
@media screen and (max-width: 500px) {
main {
width: 85%;
}
}
Une autre chose avec laquelle j'ai un peu lutté, c'est de mettre deux éléments l'un en-dessous de l'autre (<nav> et <main>) sans que le texte présent dans <main> passe sous la barre de <nav> qui a un positionnement forcé.
Fragment de la page html sur laquelle je travaille :
<body>
<nav>
nav bar
</nav>
<main>
<section>
<h2>section 1</h2>
<p>Ut consectetur eros efficitur, convallis tortor ut, placerat sapien.</p>
</section>
<section>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
Proposition de solution pour garder la partie de navigation en haut de page :
body {
margin: 0;
}
nav {
position: -webkit-sticky; /* Safari */
position: sticky;
height: auto;
top: 0;
background-color: #251D3A;
color: #E04D01;
}
main {
overflow: hidden;
background-color: #FF7700;
color: #2A2550;
}
Explications :
Il y a plusieurs valeurs possibles pour la propriĂ©tĂ© position qui indique la façon dont un Ă©lĂ©ment doit ĂȘtre positionnĂ© dans le document. Par dĂ©faut, le flux du document se dĂ©roule de haut en bas. On peut sortir un Ă©lĂ©ment du flux avec la position absolute par exemple, pour rendre le positionnement de l'Ă©lĂ©ment relatif Ă son Ă©lĂ©ment parent ou encore la position fixed si on veut le positionner relativement Ă la fenĂȘtre du navigateur. La valeur sticky quant Ă elle permet d'aller de la valeur relative (ici, relatif Ă <body> qui remplit 100% de l'espace) Ă un positionnement fixe (par exemple : top: 0, soit haut de page) en fonction du dĂ©filement du document.
Attention : Internet Explorer ne gÚre pas le positionnement sticky et Safari a besoin d'un préfixe -webkit.
Elle est complétée par la propriété overflow de l'élément suivant avec une valeur hidden pour que le contenu remplisse tout l'espace disponible avec possibilité de défilement sans barre de défilement.
Il y a peut-ĂȘtre des façons de faire plus propres mais pour l'exemple en question ça fonctionne, en plus d'ĂȘtre trĂšs court ce qui est apprĂ©ciable. On pourra ajouter des marges intĂ©rieures (padding) pour que ce soit un peu moins moche, par exemple :
padding: 0 1em;
pour <body> et <main> et
padding: 1em;
pour <nav>.
(si deux valeurs : la premiÚre est valable pour haut/bas du bloc, la deuxiÚme pour droite/gauche. Si une seule valeur : valable pour les quatre cÎtés)
J'ai enfin compris que certains éléments HTML avaient une marge et/ou padding par défaut appliquée par les navigateurs, par exemple <body> a une marge par défaut de 8px sur Firefox. Résultat : si vous coloriez votre page en jaune :
body {
background-color: gold;
}
et votre tĂȘte de page en bleu (en fournissant une hauteur pour que le bloc soit visible) :
header {
background-color: aqua;
height: 200px;
}
pour la page suivante :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
</html>
eh bien vous verrez apparaitre ce qui semble ĂȘtre une bordure non sollicitĂ©e de votre <header> ! D'aprĂšs ce que j'ai compris, il s'agit plutĂŽt de l'espace que se mĂ©nage le <body> par rapport Ă ses Ă©lĂ©ments enfants donc c'est plutĂŽt sur <body> qu'il faut agir. Pour le dĂ©barrasser de ses marges cachĂ©es, proposition de solution :
body {
background-color: gold;
margin: 0;
}
(Voir sinon une autre proposition dans un article plus rĂ©cent.) C'est le mĂȘme principe pour tous les Ă©lĂ©ments qui ont une marge par dĂ©faut paramĂ©trĂ©e par le navigateur, <h1> par exemple ou encore, <ul>.