Conditional CSS

Who am I?

• @webinista on the Twitters
• Former member of the Opera Developer Relations & Tools Team
• Currently a freelance web developer
• 2012 MinneWebCon speaker and fan of Minneapolis between
  May and September.

What is Conditional CSS?

CSS features and their associated JavaScript APIs that let us apply styles or behaviors when a particular condition is met.

Conditional CSS: three @rules

• @media
• @supports
• @viewport (not really conditional)

@media: a recap

Set styles for a particular media type.

@media print {
    body { font-size: 10pt }
}
@media screen, print {
    body { line-height: 1.2 }
}

@media and media queries

Applies styles for particular media features.

Media queries browser support

IE	Firefox	Chrome	Safari	Opera	Android	Blackberry
9+	3.5+	4.0	3.2*	9.5**	2.1+	7.0

*Safari had full support in desktop as of version 4.0.
**Opera gained full support in mobile in version 10. (Source: CanIUse.com)

Media queries basic syntax

@media [only | not] <media_type> [and] (expression){
    selector{
        property: value;
    }	
}

Media queries syntax example

@media screen and (max-width: 500px){
        header{
                position:fixed;          
        }	
}

@media demo

Media queries syntax examples

• @media only print
• @media not (aspect-ratio: 4/3)
• @media (min-width:400px) and (device-aspect-ratio: 16/9)
• @media screen and (min-width:400px),
print and (max-width: 8.5in)

Media queries in style sheet links

<link media="(device-width:480px)" rel="stylesheet"… >

Media with the <video> element

<video>
		    <source src="smallmovie.webm" media="(min-width:480px)">
					    <source src="bigmovie.webm" media="(min-width:1900px)">
<video>

With video demo

Media queries in SVG

Does not work in Internet Explorer 10.

• Based on the width of the SVG viewport
• Can refine, show, or hide SVG details as the image is scaled
• Allows for reusable, resizable elements

In SVG demo

window.matchMedia() API

• An API for interacting with media queries.
• Defined in the Media Queries Level 3 Specification

matchMedia() syntax

Argument must be a valid @media rule.

• matchMedia("screen and (min-width:400px)");
• matchMedia("(orientation: landscape)");

Returns a MediaQueryList object.

MediaQueryList interface

• media: returns list of queries or not all if the argument isn't valid.
• matches: returns true if the state of the rendered document matches the media query, false otherwise
• addListener(): Adds a media query listener.
• removeListener(): Removes the media query listener.

Adding a media query listener

function mqHandler(mq){
    if( mq.matches ){
        // do something
    }
}
var mq = matchMedia("(orientation:landscape)");
mq.addListener( mqHandler );		

matchMedia listener demo

matchMedia() browser support

IE	Firefox	Chrome	Safari	Opera	Android	Blackberry
10+	6+ *	9+ *	5.1	12.1	3+	10

*Available in Chrome for Android as of version 25 and Firefox for Android as of version 19. (Source: CanIUse.com).

How @supports works

• Supported without a prefix in browsers that support it.
• Styles applied only when the property is supported and value is valid and supported.
• Can set more than one condition using and or or.
• Can negate a condition using not
• Use parentheses to group and and or conditions.

@supports syntax

@supports [not] ( property: value-to-test ){
	/* CSS rules to apply */
}

@supports syntax example

@supports ( transform: rotateX(45deg) ){
	#myobj{
		transform: rotateX(45deg);
	}
}

@supports simple demo

@supports example using not

@supports not ( transform: rotateX(45deg) ){
	#myobj{
		transform: skewX(30deg);
	}
}

@supports using negation

@supports using and & or

@supports ( 
    ( transform: scale(1) ) or ( -x-transform: scale(1) ) 
)  and ( 
    ( transition: transform 500ms linear ) 
        or ( -x-transition: transform 500ms linear ) 
)

(Where -x- is a vendor prefix.)

@supports grouping conditions

window.CSS.supports()

• The DOM-based API counterpart to @supports
• Originally conceived of as window.supportsCSS();
• Now a CSS object attached to the window with a supports() method.

CSS.supports() syntax

var hasProp = CSS.supports('property','value');
if( hasProp ){
    // do something
}

Returns true if both property is supported, and the value is valid and supported. Returns false otherwise.

@supports & CSS.supports() browser support

IE	Firefox	Chrome	Safari	Opera	Android	Blackberry
-	20.0a2+*	-	-	12.1	-	-

* Firefox support is available in version 17+, but behind a flag. Turned on by default in Firefox 20+ (Aurora and Firefox nightly builds). (Source: CanIUse.com).

Testing for @supports support

• !!window.CSSRule.SUPPORTS_RULE: tests whether support is available at all
• 'CSS' in window: tests whether the API is available as the CSS object.
• 'supportsCSS' in window: tests whether the API is available using supportsCSS() instead
• Try atsupports.js, written by yours truly.

<meta name="viewport">

• First introduced in iOS Safari
• Divorces the document viewport dimensions from the browser window dimensions

How viewport works

Left: no viewport set. Right width=device-width

@viewport

• Outlined in the CSS Device Adaptation specification
• Moves viewport information from the HTML document to CSS

@viewport syntax

@viewport{
	    descriptor: value;
	}

Used inside of a media query to reset the viewport size or zoom level.

@viewport syntax

@media screen and (device-aspect-ratio: 8/5){
	    @viewport{
	         zoom: 0.5
	    }
	}

@viewport descriptors

Mostly the same values you use with <meta name="viewport">.

@viewport browser support

IE	Firefox	Chrome	Safari	Opera	Android	Blackberry
10+*	-	-	-	11+*	-	-

Source

Viewport sizing units

Sizes relative to the viewport's dimensions.

• vw: 1% of viewport width
• vh: 1% viewport height
• vmin: 1% of viewport’s smaller dimension
• vmax: 1% of viewport’s larger dimension

Viewport sizing units

IE	Firefox	Chrome	Safari	Opera	Android	Blackberry
9.0+*	19+	20+**	6+	-†	-	10

* Partial support in IE9. **Chrome for Android added support in version 25. †Presto-based Opera. Oprium will inherit Chrome's support. Source

Viewport sizing units

#myobj{
        width: 40vw;
       height: 90vw;
     }

Viewport units demo