par
Victor BRITO » 26 juin 2009, 15:28
Les développeurs de
Kiwano ont ajouté un artcle sur les
média queries mais bon j'en vois pas encore l'utilité... si vous pouvez m'expliquer...
Pour résumer, ce module CSS 3 permet de gérer finement les supports destinataires des feuilles de style, non seulement selon le type de support (écran d'ordinateur classique, imprimante, petit écran, projecteur, synthèse vocale, lecteur braille, etc.), mais aussi selon des critères plus pointus comme la largeur d'écran disponible, avec la possibilité de réunir plusieurs conditions au chargement de la feuille de style.
Prenons un exemple concret, qu'on peut déjà remarquer dans certains sites Web : le chargement d'une feuille de style destinée aux écrans de téléphone portable. Grâce à ce module CSS 3 et à la nouvelle syntaxe qu'il introduit, on peut appeler une feuille style qui ne cible comme médias que ceux de type écran
et dont la largeur d'écran maximale disponible ne dépasse pas 480 pixels (de façon à ce que les navigateurs utilisant comme support un écran d'ordinateur classique ne puissent pas charger la feuille de style en question), ce qui donne les bouts de code suivants (selon les trois méthodes possibles d'appel d'une feuille de style externe dans une page (X)HTML).
Code : Tout sélectionner
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />Code : Tout sélectionner
<style type="text/css" media="only screen and (max-device-width: 480px)">
@import "mobile.css";
</style>Code : Tout sélectionner
<style type="text/css">
@import "mobile.css" only screen and (max-device-width: 480px);
</style>
Cet exemple de syntaxe de média CSS 3 est déjà compris par les versions les plus récentes d'Opera Mini et d'Opera Mobile, ainsi que par Safari pour l'iPhone.
[quote="Marseille-13"]Les développeurs de [url=http://www.kiwano.fr]Kiwano[/url] ont ajouté un artcle sur les [url=http://www.kiwano.fr/nouveaute-css-3-media-queries/]média queries[/url] mais bon j'en vois pas encore l'utilité... si vous pouvez m'expliquer...[/quote]
Pour résumer, ce module CSS 3 permet de gérer finement les supports destinataires des feuilles de style, non seulement selon le type de support (écran d'ordinateur classique, imprimante, petit écran, projecteur, synthèse vocale, lecteur braille, etc.), mais aussi selon des critères plus pointus comme la largeur d'écran disponible, avec la possibilité de réunir plusieurs conditions au chargement de la feuille de style.
Prenons un exemple concret, qu'on peut déjà remarquer dans certains sites Web : le chargement d'une feuille de style destinée aux écrans de téléphone portable. Grâce à ce module CSS 3 et à la nouvelle syntaxe qu'il introduit, on peut appeler une feuille style qui ne cible comme médias que ceux de type écran [b]et[/b] dont la largeur d'écran maximale disponible ne dépasse pas 480 pixels (de façon à ce que les navigateurs utilisant comme support un écran d'ordinateur classique ne puissent pas charger la feuille de style en question), ce qui donne les bouts de code suivants (selon les trois méthodes possibles d'appel d'une feuille de style externe dans une page (X)HTML).
[code]<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />[/code]
[code]<style type="text/css" media="only screen and (max-device-width: 480px)">
@import "mobile.css";
</style>[/code]
[code]<style type="text/css">
@import "mobile.css" only screen and (max-device-width: 480px);
</style>[/code]
Cet exemple de syntaxe de média CSS 3 est déjà compris par les versions les plus récentes d'Opera Mini et d'Opera Mobile, ainsi que par Safari pour l'iPhone.
