1479 sujets

Web Mobile et responsive web design

Charger CSS et media queries

Bonjour à tous,

Je bloque sur un problème qui je pense est tout simple, et j'ai beau lire divers choses je ne trouve pas la réponse.

Je souhaiterais créer une css qui ne soit charger qu'en desktop.
J'ai donc testé :
<link rel="stylesheet" media="only screen and (min-width: 99999px)" href="big.css" type="text/css" />
Mais quelque soit le support, sur FF ou chrome la CSS est chargé?
Pas appliqué mais dans l'onglet "network" je vois que l'onglet est téléchargé.

Ou est mon erreur?
[b]Note : Lorsqu'une feuille de style est attachée à un élément <link> comportant une requête média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.[/i]
- https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
Voilà ta réponse.
Modifié par Soldat8889 (16 Aug 2018 - 15:05)
Ah bah… Merci effectivement.

Mais du coup existe t il une solution, pour améliorer les perfs en ne chargeant qu'une css légère sur mobile, sans passer par du JS.
Ce n'est pas grave si ce n'est qu'un fichier seulement car il sera mis, après que tu aies charger la page ne cesse qu'une seule fois, en cache !
@Soldat8889
Je te remercie mais j'ai pas compris ta phrase?
"car il sera mis, après que tu aies charger la page ne cesse qu'une seule fois, en cache !"
??

Je suppose, que tu veux dire que ce fichier ne sera télécharger en fin de chargement de la page. Et qu'une seul fois puisque mis en cache.

Mais pourquoi chargé une ressource sur mobile qui est inutilisé. C'est contre productif pour de la perf.
Sujet clos
Aller à