Media queries
Appareil mobile
Selon de nombreuses sources en ligne, nos sites Web sont maintenant vu autant, sinon même plus, sur appareil mobile que sur ordinateur de bureau. Ce changement majeur de navigation sur l'Internet nous oblige, nous les développeurs, à nous adapter à nos consommateurs ainsi qu'à nos clients. Même si nous sommes habitué à travailler et à naviguer l'Internet sur un ordinateur (puisquer c'est notre travail), cela n'est généralement pas le cas de nos clients.
Pour s'assurer que votre design fonctionne sur appareil mobile et sur grand écran, les programmeurs ont deux approche: "mobile-first" et "desktop-first". Le concept est de développer l'interface graphique pour appareil mobile ou écran de bureau en premier et graduellement convertir l'interface à l'autre. Dans le cadre de ce cours, je vous recommande d'utiliser l'approche "mobile-first" puisqu'elle est un peu plus simple lorsqu'on débute en CSS. Ceci étant dit, vous verrez qu'avec l'expérience, les deux approches se mélangeront un peu.
Design réactif ou adaptatif
Le design réactif (responsive design) est le concept où le visuel de notre site web est fluide et pourra facilement changer en fonction de la taille de l'écran. Un design réactif nous permet d'avoir un site web qui réagi différemment sur un petit écran comme un téléphone cellulaire ou sur un grand écran comme un écran de bureau. Bien entendu, toutes les tailles d'écran entre les 2 sont aussi supporté.
Le design adaptatif est similaire au design reactif, mais va forcer le site web à s'afficher de la même façon selon certains intervals de grandeur d'écran. Typiquement, on y trouve 3 intervalles, soit un pour téléphone mobile, un pour les tablettes et un autre pour les écran de bureau. Le design adaptatif est une façon intéressante de réfléchir à son site web, surtout pour les artistes graphiques, mais est moins intéressant du côté développement.
Dans le cadre de ce cours, nous utiliserons principalement le design réactif.
Briser notre page en fonction de sa taille
En web, nous dirons que notre page se "brise" lorsque des changements majeurs seront mis de l'avant lorsque la taille du navigateur change. Dans notre CSS, nous utiliserons des conditions pour exécuter du CSS uniquement si la taille de l'écran est plus grande (ou plus petite) qu'un certaine taille. Ces conditions seront ajouté à l'aide de la règle @media, que l'on appelle aussi media queries.
Les règles @media nous permettent d'exécuter du code CSS dépendant de plusieurs conditions, comme si la page est visualisé pour l'impression, en couleur ou non, selon quelle orientation ou plusieurs autres. Toutefois, nous l'utiliserons majoritairement pour exécuter du code CSS en fonction de la taille de l'écran.
Dans l'exemple ci-dessus, l'instruction @media indique que le code s'exécute uniquement si l'écran est plus grand que 35rem. Essentiellement, la couleur par défaut de la boîte qui est #ccc sera remplacer par #333 lorsque la taille du navigateur est plus grande que 35rem.
Briser la page plusieurs fois
Il est possible de mettre plusieurs règles @media dans le même fichier CSS. Cela nous permet d'effectuer plusieurs brisures dans notre page et d'exécuter du CSS.
Comme vous pouvez le constater dans l'exemple ci-dessus, le code par défaut est le code qui est nécessaire pour être exécuté sur petit écran. Le code dans les @media indiquera les changements à faire lorsque l'interface s'aggrandit. On voit donc que notre approche ici est "mobile-first". Le contraire est possible à l'aide de max-width au lieu de min-width dans les @media, mais cette approche est généralement plus difficile à bien coder.