Week 224 was posted by Charanjit Chana on 2022-02-07.
As I've started looking at CSS and page layouts in my spare time, I thought I should make a few changes to SkeletonCSS again. Something small this time, I've added two optional arguments to the mq() mxin. The former allows you to optionally specify an orientation while the second brings the flexibility to decide if a media-query should be looking at the min or max width.
From memory, I thought nesting media queries was possible, but it's a SASS feature. Thankfully you can chain multiple properties together.
Orientation is something I've seen before but rarely used. It could be an interesting approach to dealing with certain layouts. I actually dug into this expecting to have to deal with aspect ratios but it looks like specifying the orientation is more than enough.
When I tested with a 600x600px page it was treated as if it was portrait. Any aspect ratio that has width greater than it's height is treated as landscape and the opposite orientation is portrait. Pleasantly surprised with how it works.
mq(600px, portrait) {
// CSS here
}The example above would specify a media query that looked for a display that was at least 600px wide and portrait orientation.
mq(600px, portrait, max) {
// CSS here
}This example changes it slightly by moving from min-width to max-width but still expects a portrait orientation.
If you're using SkeletonCSS, and want to ignore the orientation property, just set it to 0 and it will be ignored although only the portrait and landscape keywords are supported by this mixin.
I'm looking to refresh a couple of sites soon and planning to see if I can do something interesting with these new media queries. You can find SkeletonCSS on GitHub.
Tags: css, skeletoncss