Conditional CSS

Tiffany B. Brown, Webinista, Inc.



Conditional CSS

Who am I?

Who am I?

What is Conditional CSS?

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

@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.

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

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 queries syntax examples

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>

Media queries in SVG

Does not work in Internet Explorer 10.

matchMedia()

window.matchMedia() API

matchMedia() syntax

Argument must be a valid @media rule.

Returns a MediaQueryList object.

MediaQueryList interface

Adding a media query listener

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

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).

@supports

How @supports works

@supports syntax

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

@supports syntax example

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

@supports example using not

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

@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.)

CSS.supports()

window.CSS.supports()

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

@viewport

<meta name="viewport">

How viewport works

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

@viewport

@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

  • min-width
  • max-width
  • min-height
  • max-height
  • width
  • height
  • zoom
  • min-zoom
  • max-zoom
  • user-zoom
  • orientation

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

Viewport sizing units

Sizes relative to the viewport's dimensions.

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;
     }

is.gd/9f1miC