HTML and CSS Reference
In-Depth Information
•
$media_type
A string (optional, the default is all)
Again, registering your style sheets using the
init
action is best.
To your theme's
functions.php
, you would add this:
function
mytheme_register_styles
(){
//mobile.css for all devices
wp_register_style
(
'theme-mobile'
,
//handle
'/wp-content/themes/my-theme/mobile.css'
,
//source
null
,
//no dependencies
'1.0.0'
//version
);
//desktop.css for big-screen browsers
wp_register_style
(
'theme-desktop'
,
'/wp-content/themes/my-theme/desktop.css'
,
array
(
'theme-mobile'
),
'1.0.0'
,
'only screen and (min-width : 960px)'
//media type
);
/* *keep reading* */
}
add_action
(
'init'
,
'mytheme_register_styles'
);
We have used CSS3 media queries to prevent mobile browsers from parsing our desktop style
sheet. But Internet Explorer versions 8 and below do not understand CSS3 media queries and
so will not parse the desktop CSS either.
IE8 is only two years old, so we should support its users with conditional comments.
