CODEWITHSUNDEEP
htmlcss
Sam D20
Sam D20

Reputation: 2575

How to cancel initial stylesheet when a mobile stylesheet is loaded?

<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

I have these two lines at the top of my html document. The first one is my typical style sheet, and the second stylesheet is my mobile style sheet that is loaded when the browser detects a mobile device. Both stylesheets are loaded on top of each other. Would it be possible to negate the effects of index.css whenever handheld.css is loaded?

Upvotes: 0

Views: 387

Answers (2)

Milche Patern
Milche Patern

Reputation: 20442

With the media queries, you won't be able to 'cancel' but 'stop' using it.

something like this :

<link href="base.css" rel="stylesheet"/>

/* this next will be only used when **screen** AND min-width big screen */
<link href="desktop.css"
    media="only screen and (min-width: 801px)" rel="stylesheet"/>

/* this next will be only used when it's a tablet */
<link href="tablet.css"
    media="only screen and (min-width: 629px) and (max-width: 800px) and
    (orientation:portrait),
    only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

/* this next will be used only when but .. you figured it out */
<link href="desktop.css"
    media="only screen and (min-width: 801px),
    not only screen and (min-height:629px) and (max-height:800px) and
    (orientation:landscape)" rel="stylesheet"/>

You can look at this SO answer and study a little over MozDevNetwork

Upvotes: 2

jsalonen
jsalonen

Reputation: 30481

You cannot cancel a stylesheet per se, but you can negate the effects of the previous stylesheet by overriding its CSS rules.

You can also use a third stylesheet or apply media query rules to make some CSS that only applies for non-mobile devices. Like:

<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="desktop.css" type="text/css" media='screen and (min-device-width: 481px)'/>
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>

Note that these approaches require support for CSS3 min/max media queries. If you need to support browsers that are not capable of doing that (IE6/IE7/IE8), use a polyfill like Respond (https://github.com/scottjehl/Respond).

Upvotes: 5

Related Questions