@artifak/media

Although Artifak helps you to write less media queries, there are also many other types of media queries available now which focuses more on querying devices and accessibilty. The Artifak Media library essentially helps with that and is a styled-component mixin to help you write media queries for your styled-components. Note that the CSS media query operator "not" is not supported for the time being. Docs are also available at Artifak Media.

Installation

Yarn

yarn add @artifak/media

NPM

npm install @artifak/media

Usage

media

Simply import media and the media query rule that you desire to use and include it in your styled component.

At its most basic usage, you can specify for example a min-width rule like so:

import { media } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ width: '>= 30em' })`
    background: orange;
  `}
`;

Querying Media With "And"

For concatenation using the "and" keyword, below is a simple rule that would equate to "@media screen and (min-width: 30em)". Basically, just append the rules to the query object to execute a media query with "and" keywords.

import { media, screen } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ screen, width: '>= 30em' })`
    background: orange;
  `}
`;

Querying Media With "Or"

For "or" statements, simply provide another query object as argument. Below will equate to: "@media screen and (min-width: 30em), (orientation: landscape)".

import { media, screen, landscape } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ screen, width: '>= 30em' }, { landscape })`
    background: orange;
  `}
`;

Querying Media With Min, Max or Single Value

Keys to queries that offer min/max values are

• width
• height
• ratio (which is for aspect-ratio)
• res (which is for resolution)

For min values, use the ">=" operator.

import { media, screen } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ screen, width: '>= 30em' })`
    background: orange;
  `}
`;

For max values, use the "<=" operator.

import { media, screen } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ screen, width: '<= 30em' })`
    background: orange;
  `}
`;

For both min and max values as per below, is an example for min and max widths.

import { media, screen } from '@artifak/media';

const MyArticle = styled.article`
  ${media({ screen, width: '30em >= width <= 50em' })`
    background: orange;
  `}
`;

If for some reason you only want a single value for these properties, it can be applied like so.

import { media, screen } from '@artifak/media';

const MyArticle = styled.article`
  ${media({
    screen,
    width: '30em',
    height: '50em',
    ratio: '1/3',
    res: '72dpi'
  })`
    background: orange;
  `}
`;

Media Queries

Apart from the common width, height, aspect-ratio and resolution queries, below are a list of currently available media queries. Due to some newer queries not having sufficient browser support, they are omitted from the library for the time being.

Available Queries

Property Name	Value
all	all
screen	screen
onlyScreen	only screen
print	print
onlyPrint	only print
speech	speech
onlySpeech	only speech
hover	hover: hover
hoverNone	hover: none
anyHover	any-hover: hover
anyHoverNone	any-hover: none
pointer	pointer: pointer
pointerNone	pointer: none
anyPointer	any-pointer: pointer
anyPointerNone	any-pointer: none
displayFullScreen	display-mode: fullscreen
displayMinUI	display-mode: minimal-ui
displayStandalone	display-mode: standalone
displayBrowser	display-mode: browser
portrait	orientation: portrait
landscape	orientation: landscape
darkColorScheme	prefers-color-scheme: dark
lightColorScheme	prefers-color-scheme: light
reducedMotion	prefers-reduced-motion: reduce
reducedMotionAny	prefers-reduced-motion: no-preference