#Media_Queries Range Syntax
▻https://ishadeed.com/article/range-syntax
/* Before */
.section {
@media (min-width: 300px) and (max-width: 500px) {
/* styles for the card */
}
}
/* After */
.section {
@media (300px <= width <= 500px) {
/* styles for the card */
}
}
#css
Merci !
Media queries are the backbone of responsive design. We use them to control how a design should change based on the viewport size. But the min-width and max-width syntax can be confusing, and in some cases, cause layout bugs that take time to spot.
This article aims to convince you to use range queries, starting today.
Ah ça y est, c’est enfin utilisable ? Quelle bonne nouvelle, ça va enfin devenir lisible tout ça, quel progrès.
The Guide To #Responsive_Design In 2023 and Beyond - Ahmad Shadeed
▻http://ishadeed.com/article/responsive-design
Responsive design isn’t about #media_queries anymore.
So, the web is responsive by default, unless we start getting creative in designing our layouts.
Using modern CSS
– The typography is responsive to the viewport width via clamp() function.
– The spacing is responsive to the viewport width via clamp() function.
– The hero section is responsive to its content via flexbox wrapping.
– The cards grid is responsive to the available space with minmax(), no media queries.
– The card component is responsive to its wrapper via size container queries and style container queries.
– The margins and paddings are responsive to the websites language via logical properties.
Using media queries
– The site navigation is responsive to the viewport width.
– The theming is responsive to the user preferences in their operating system.
– The card hover effect is responsive to what the user is using (touch vs mouse).
Oh mais dis donc, il y a un très intéressant critère dans les #media_queries : aspect-ratio
aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio (<ratio>) entre la largeur et la hauteur de la zone d’affichage (viewport).
La caractéristique aspect-ratio est définie avec un ratio (type CSS <ratio>) qui représente le ratio entre la largeur et la hauteur de la zone d’affichage. C’est une caractéristique d’intervalle ce qui signifie qu’on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d’une valeur minimale ou maximale.
Mais ce n’est pas encore dans CanIUse, et je n’ai trouvé aucune indication du niveau d’adoption du truc.
Quantity Queries for CSS · An A List Apart Article
▻http://alistapart.com/article/quantity-queries-for-css
I wouldn’t do that to you, friends. This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with @media queries for viewport dimensions. I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this today, with CSS that’s already available.
#Sass-mq/sass-mq · GitHub
▻https://github.com/sass-mq/sass-mq
A Sass mixin that helps you compose #media_queries in an elegant way. Tags: Sass media_queries #RWD #clevermarks
2014 State of #Element_Queries
▻http://www.xanthir.com/b4VG0
Tags: Element Queries #Media_Queries Responsive Web Design (RWD)
CSS Media Queries for iPads & iPhones | Stephen Gilbert
▻http://stephen.io/mediaqueries
Many times I’ve had to design #responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site’s content. Because of this, I’ve ended up with a somewhat large list of CSS #media_queries for typical devices over the past year or two.
I’ve posted these media queries to help designers & developers save some time searching. I’ll continue adding to the list as Apple (or another company that can sell a significant amount of products) releases them.
#rwd
Web Performance: One or thousands of #Media_Queries?
▻http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries
“engines do serialize and strip out duplicated media-queries so they only need to evaluate each media query once. Also they cache the queries so that they can re-use it later on” Tags: Media Queries Responsive Web Design (RWD) #webperf
Breakpoint
▻http://breakpoint-sass.com
« Breakpoint makes writing #Media_Queries in #Sass super simple. » Tags : Sass Media Queries
Yeah, excellent. Ce qui est bien c’est qu’on a tou⋅te⋅s chez soi, ou au moins lu déjà chez quelqu’un, ce genre de fonction qui aide à la lisibilité. Mais là c’est une lib officielle maintenue sur le long terme. Pratique pour ne pas maintenir la sienne dans son coin.
Et puis, il y a des GIF animés aussi.
Faut-il limiter le nombre de #Media_Queries ? (Sass and Media Queries)
▻http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries
"Does combining the media queries have any actual performance improvements? Are people simply raising issue because they don’t like the way the output CSS looks? That’s a damn good question and one that Aaron also raised. As he put it, “Let’s ask science!”" Tags: Media Queries Responsive Web Design (RWD) #Sass #webperf
Mobile-first Responsive Web Design and #IE8 | theguardian.com
▻http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8
"when supporting older, buggy and incapable browsers, we have to wave some of the “good ol’ web best practices” goodbye... so, how do we make sure we don’t cripple our codebase with hacks for #Internet_Explorer so the other 95.5% of our readers still benefit from the best experience possible?" Tags: Responsive Web Design (RWD) IE8 Internet Explorer #Sass #CSS #Media_Queries
Essential considerations for crafting quality #Media_Queries
▻http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries
“Learn what you need to know to set up media queries that maximize efficiency and robustness for your particular project. There are pros and cons to making your media queries embedded versus external, overlapping versus stacking your media queries, starting with mobile versus desktop styles, and using conditional comments versus JavaScript to add support for IE 8 and earlier versions.” Tags: Responsive Web Design (RWD) #bonne_pratique Media Queries #CSS
Avec Mosquito, on vient de livrer le nouveau site de la Fémis :
▻http://www.femis.fr
C’est du #SPIP_3, #responsive, #HTML5 (et du #shameless_autopromo évidemment).
Parmi les points originaux…
– Le menu de navigation principal avec son animation « gauche-droite » au survol. Le javascript est très simple, et l’animation est directement en transition CSS. Dans chaque menu, les colonnes des rubriques/sous-rubriques sont aussi équilibrées que possible, et c’est fait directement avec Masonry.
– Les images passent par mon plugin « image_responsive », ce qui permet de gérer différentes tailles, ainsi que le chargement d’images deux fois plus grandes pour les écrans haute définition.
– Il y a réellement très peu d’images pour réaliser l’interface graphique. C’est essentiellement des CSS avec des dégradés discrets, des ombres portées… Comme d’habitude, mon plugin « CSS imbriqués » est très utile pour faciliter le codage (CSS avec gestion des préfixes et des variantes de navigateurs, code hiérarchisé, inversion des #media_queries…).
– La moteur de recherche (c’est du pur SPIP/Fulltext) bénéficie de petites améliorations dans les squelettes. (C’est accessible via la loupe en haut à gauche de la page.) La première consiste à faire des suggestions lorsqu’on commence à taper un mot. Tu tapes « réali », et ça te déplie des suggestions : « réalisation, réalisateurs, réalisateur, réalisé, réaliser… » classées en fonction de la présence de ces mots dans le site. Une fois que tu as validé ta recherche, la page de résultats est classique, mais avec un détail : le texte « descriptif » de chaque article est calculé pour afficher le terme recherché, surligné dans son contexte (habituellement on affiche simplement le début du texte comme partout dans le site ; là il y a un calcul amusant).
– Une grosse partie du boulot a consisté à refondre la base de donnée des anciens élèves. D’abord créer des moulinettes pour réorganiser l’ancienne base de données dans ma nouvelle structure. Ensuite évidemment gérer l’affichage sur le site (avec SPIP, cette partie, c’est assez finger in ze noze). Et surtout : des formulaires pour que chaque ancien étudiant gère lui-même sa fiche, ses infos personnelles, sa filmographie, son CV structuré… Le tout en essayant de proposer des interfaces aussi intuitives que possible, ce qui est toujours une gageure quand on a des formulaires un peu complexes.
– Ça faisait carrément longtemps : on utilise les brèves de SPIP ! (Pour l’« Actualité des diplômés »).
– Comme à mon habitude, la page d’accueil et le footer sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).
Comme à mon habitude, la page d’accueil et le rooter sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).
Héhé, par deux fois déjà, j’ai opté pour exactement la même technique, afin de sélectionner les contenus listés dans un carrousel d’accueil. Cela permet d’avoir une image différente, pas forcément intégrée au contenu final qui est lié, pareil pour le titre et le descriptif, qui peuvent être propres à l’accroche, et ça permet effectivement aussi de rediriger vers un autre contenu externe.
Pour ne pas faire de bidouille, ça pourrait mériter un plugin dédié, du genre « Sélections de contenus », où on pourrait en créer autant qu’on veut, avec un identifiant textuel non lié à la base (ce qui permet de l’utiliser dans les squelettes génériquement), et qui permettrait alors de sortir :
<BOUCLE_news_accueil(SELECTIONS){identifiant=news_accueil}>
LOGO_SELECTION
TITRE
DESCRIPTIF
LIEN (celui ci pouvant gérer à la fois une URL classique, ou un identifiant de contenu SPIP du genre : « evenement1234 »)
</BOUCLE_news_accueil>
Avec une interface bien fichue pour les administrer. Ça sera plus facile et plus facilement compréhensible (car pas un détournement).
Salut @arno,
j’ai enfin pris le temps de commencer ce plugin de sélections éditoriales.
Voici le premier commit :
▻http://zone.spip.org/trac/spip-zone/changeset/83884
Tu peux donc te faire une sélection « accueil », une autre « footer », etc. Et les récupérer facilement dans tes squelettes :
<BOUCLE_une(SELECTIONS){identifiant=accueil}>
<BOUCLE_contenus(SELECTIONS_CONTENUS){id_selection}>
<a href="#URL">
#LOGO_SELECTIONS_CONTENU
#TITRE
#DESCRIPTIF
</a>
</BOUCLE_contenus>
</BOUCLE_une>Et dans le champ « url », tu peux y mettre :
– soit un URL complet quelconque
– soit un objet SPIP sous la forme « article123 », « evenement456 », « rubrique789 ».
Dis moi ce que tu en penses.
(Et comme le dit le commit, viendra ensuite l’ajout de sélections en-dessous d’un objet SPIP. Lorsqu’on le veut.)
Oublié de le dire :
1) j’ai ajouté la création d’une sélection sous un contenu SPIP (un article par exemple), et
2) j’ai modifié le formulaire d’ajout d’un contenu sélectionné pour le rendre plus pratique : seule l’URL est obligatoire, et si on ne met que ça, la magie va chercher le titre du contenu SPIP (si on a mis « article1234 » par exemple) ou le titre de la page HTML (si on a mis un URL http).
Are #Media_Queries the answer to the #fold? | Boagworld - Web & Digital Advice
▻http://boagworld.com/dev/are-media-queries-the-answer-to-the-fold
Tags: Responsive Web Design (RWD) #vertical Media Queries fold
Responsive Bases & #vertical Spaces – David Bushell – Web Design & Front-end Development
▻http://dbushell.com/2012/11/19/responsive-bases-vertical-spaces
Tags: Responsive Web Design (RWD) #fold #Media_Queries vertical
Reacting to the #resize – David Bushell – Web Design & Front-end Development
▻http://dbushell.com/2013/08/29/reacting-to-the-resize
Tags: Responsive Web Design (RWD) #Media_Queries resize
7 Habits of Highly Effective #Media_Queries | Brad Frost Web
▻http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
Un autre article du même sur le même thème, un #workflow #responsive, des habitudes de travail :
▻http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow
Working around a lack of element queries | Filament Group, Inc., Boston, MA
▻http://filamentgroup.com/lab/element_query_workarounds
Lately, we’ve been running into a recurring dilemma when building #responsive_designs. We want to build responsive layouts comprised of many modular, independent HTML components that fluidly fill any layout container we drop them into, but CSS3 #media_queries don’t currently offer a way to make content respond to its container’s dimensions (as opposed to the overall viewport size).
Sur le même sujet, tu as peut-être lu cet article :
Responsive Webdesign – présent et futur de l’adaptation mobile - Alsacreations
▻http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html
La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs qui essaient de nous faire croire qu’il suffit aujourd’hui, pour optimiser un site pour mobile, d’ajouter 2 Media Queries pour l’iPhone et l’iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d’être parfaite et en constante évolution. Beaucoup de choses sont aujourd’hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine.
[...]
Le responsive webdesign reste une technique et une infime partie de ce qui est aujourd’hui appelé « Adaptive Webdesign ». Le but de l’article n’est pas non plus de décourager les gens qui optimisent des sites pour mobile, mais de mettre le doigt sur ce qui aujourd’hui pose problème, est bancal, pour ensemble, trouver des solutions à ces différents problèmes.
Improve #Mobile Support With Server-Side-Enhanced Responsive Design | Smashing Mobile
▻http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive
a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding the right balance between server-side and client-side implementation.
1. Use Your #CMS
2. Use A #Device-Description Repository
3. Execute #CSS #Media_Queries Server-Side
4. Optimizing #Images
5. Pre-Processing and Intelligent Caching
css - Detecting #iPad / #iPhone using #media_queries - Stack Overflow
▻http://stackoverflow.com/questions/11680095/detecting-ipad-iphone-using-media-queries
I use the following media queries (defining splash images for web apps). It handles iPhone non-retina and iPhone 4/4s and both #non-retina iPad and #retina iPad (portrait and landscape).
Ça y est, je viens de livrer le système de sites des délégations du Secours catholique :
►http://yvelines.secours-catholique.org
Ce sont des squelettes et plugins permettant de fabriquer et gérer, sur une même installation de #SPIP, une centaine de sites de délégations départementales. Pour passer d’une délégation à l’autre, utiliser le menu « déroulant » en haut de page.
Les deux principales originalités, ici, c’est :
– #responsive_web_design : la maquette change assez nettement selon la taille de l’écran (smartphone, tablette verticale/horizontale, ordinateur),
– webfont de chez Google ; j’en ai trouvé une complète en français, et qui est dans la logique des polices utilisées habituellement par le Secours catholique.
J’exploite les dernières évolutions que j’ai développées dans le plugin CSS imbriqués :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-pre-processeur-de-css
– les #media_queries sont insérées directement à l’intérieur des styles concernés, c’est le plugin qui, ensuite, inverse la structure ;
– des pseudo-styles pour faire des CSS3 dotées d’alternatives (automatiques) pour MSIE (même version antiques).
Ah, j’oubliais : c’est le premier site où j’ai systématiquement utilisé mon pseudo-style :
-spip-clear : fix ;
qui fabrique n’importe où l’évacuation des float en fin de bloc (auto-clear, quoi). C’est super-super-pratique, puisque
– par principe ça évite de mettre des blocs « nettoyeurs »,
– là c’est purement dans les CSS (pas besoin de nommer spécifiquement des blocs « .clearfix »),
– du coup, c’est même compatible avec les media queries, puisque je peux faire du « auto clear » pour certaines largeurs et pas dans d’autres.
Ça n’a l’air de rien, mais ça change assez nettement la façon de coder les pages.
Exemple de media queries insérés à l’intérieur de la structure des CSS :
Roh c’est top ce truc. Ça rend les CSS super lisibles du coup...
responsivepx - find that tricky breakpoint
►http://responsivepx.com
Enter the url to your site - local or online: both work - and use the controls to adjust the #width and #height of your #viewport to find exact breakpoint widths in pixels. Then use that information in your #media_queries to create a #responsive_design.
Nouvelle version du plugin « CSS imbriqués » :
►http://plugins.spip.net/CSS-imbriques
Le plugin est désormais compatible avec les déclarations @media, permettant de préciser des variantes de classes selon différents critères (support, largeur d’affichage...).
Subtilité : on peut intégrer la déclaration @media à l’intérieur d’une hiérarchie de CSS imbriqués (alors que, normalement, @media n’est présent qu’à la racine). Cela permet de déclarer une variante de media directement dans la structure logique (l’imbrication des CSS), le plugin se chargeant à la fin de regrouper toutes les variantes de classes d’un même @media en fin de feuille de style.
Faudrait que je teste un jour, mais j’aime #LESS qui a l’avantage de ne pas être lié à #SPIP...
Mais pourquoi un tag #responsive_web_design ? Quel rapport ?
Parce que si tu veux faire du responsive web design, les media queries sont les bienvenues, et c’est en prévision de ça que j’ai introduit cette façon de procéder (les @media queries hiérarchisées à l’envers) dans le plugin.
c’est vraiment top mais en effet ce serait encore plus top d’essayer de converger avec #less ►http://lesscss.org ; de ce que j’ai vu rapidement, il y aurait deux ou trois détails de syntaxe + les variables
Ça ne me semble pas évident :
– on a déjà une syntaxe dans SPIP,
– mon plugin permet parfaitement d’utiliser la syntaxe de SPIP.
La convergence, si elle revient à ajouter une syntaxe tirée de Less à la syntaxe existante de SPIP, ça me semble assez casse-gueule. Les variables de LESS s’ajouteraient aux variables SPIP, et les fonctions de LESS s’ajouteraient aux fonctions de SPIP, avec en plus une syntaxe différente.
Home | St Paul’s School
►http://www.stpaulsschool.org.uk
#web #design #media_queries #inspiration #CSS
Stephen Caver — Luck is probability taken personally
►http://stephencaver.com
#design #web #fluide #CSS3 #media_queries #Stephen_Caver #inspiration
