Vidéo: Slick web animations -- Polycasts #23 2025
Depuis la version CSS 2, il a été possible de créer des styles spécifiquement destinés à différents appareils en changeant le type de média. Par exemple, il est courant de créer une feuille de style spéciale pour les imprimantes qui supprime les images d'arrière-plan et d'autres éléments de conception qui peuvent rendre une page difficile à lire lorsqu'elle est imprimée.
CSS 3 va encore plus loin, permettant de cibler l'iPad et l'iPhone dans les orientations portrait et paysage. Le site Jelly Rancher utilisé ici à titre d'exemple comprend deux ensembles de styles: Un ensemble de styles fonctionne bien dans les derniers navigateurs de bureau, et les feuilles de style supplémentaires sont conçus pour l'iPhone et l'iPad.
Vous voyez ici le résultat de l'utilisation de deux feuilles de styles pour que la même page HTML s'affiche différemment en modes paysage et portrait.
Ce site a été créé en créant une feuille de style conçue pour les navigateurs de bureau nommés principal. css. Cette feuille de style est liée à la page avec le code suivant:
Les liens suivants ont été ajoutés aux feuilles de style créées pour les modes paysage et portrait sur l'iPad et l'iPhone. Notez que CSS 3 n'inclut pas spécifiquement un moyen de cibler l'iPad ou l'iPhone, mais vous pouvez utiliser CSS 3 pour cibler n'importe quelle taille d'écran.
Ainsi, les sites ciblaient l'iPhone et l'iPad en spécifiant des largeurs maximales et minimales égales à la taille de chaque appareil. Pour mieux distinguer les feuilles de styles, l'orientation a été ajoutée pour identifier la feuille de style qui doit être appliquée par le navigateur lorsque le périphérique est en mode portrait ou paysage.
Voici les liens vers les deux feuilles de style pour l'iPad:
Des notes sont incluses dans le code entre les balises de commentaire pour faciliter l'identification des différentes feuilles de style dans le code HTML. Par exemple, la ligne
Voici les liens vers les deux feuilles de style pour l'iPhone:
