Is it possible to disable a stylesheet?

HTML & CSS
1

From what I have been able to find on the net this is not possible, but I cannot be certian of this.

What I would like to do is to disable my nav bar stylesheet and switch to another nav bar stylesheet based on browser width. This would eliminate the need of having to disable all of the features that the wide-screen nav bar has before I implement the small viewport nav bar.

I hope this makes sense.

Thanks.

2

Well you could technically write your mobile (or larger screen) stylesheet to cancel out the properties of the other stylesheet. Other than that, perhaps Javascript might be able to help you or PHP.

So in conclusion; either make the stylesheet cancel the other one out (reset to defaults), or use Javascript for this.

3

@RyanReese
Thanks for the comments. I was afraid that was going to be the answer, but that’s fine. Setting my nav bar back to its default is not a problem. I think it would be great if we could have this capability. Someday??

Thanks again.

4

This is quite simple using @media queries in CSS. You can target specific browser sizes:

/* Default rules for all device widths */
#nav {
    background: blue;
}

/* Rules applied to devices that have a width larger than 767px */
@media (min-device-width: 767px) {
    #nav {
        background: red;
    }
}

Alternatively, you can use min-width rather than min-device-width for overriding the rules.

5

As @kirkbeard says, this is the purpose of media queries. You don’t have to disable anything, but rather just target your rules to the appropriate screen size.

If using media queries, you also need to add the viewport meta element to the head of your pages. E.g.

<meta name="viewport" content="width=device-width, initial-scale=1">
6

I think you missed Santafe’s point in that he doesn’t want to cancel out previous styles with media queries but start with a clean slate for the mobile nav. :smile:

You could do it with a simple class change on the nav using a script and then target each nav using the class that you added. Of course that makes the page reliant on a script to work (although most mobile menus are in initiated with a script toggle anyway).

Usually it’s not that hard to undo styles anyway. :smile:

For the latest versions of Firefox and webkit you can use the ‘all’ keyword to reset an element to its default.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1{text-align:center}
.nav {
    background:red;
    color:#fff;
    border:1px solid #000;
    padding:10px;
    max-width:960px;
    margin:0 auto;
    text-align:center;
}
.nav li, .nav a {
    display:inline-block;
    vertical-align:middle;
    border-right:apx solid #fff;
}
.nav li:last-child a{border-right:none}
.nav a {
    color:#fff;
    text-decoration:none;
    padding:0 25px;
}
.mobile-nav {
    display:none;
    overflow:hidden;
    border-radius:6px;
    padding:5px;
    background:blue;
    color:#fff;
    text-align:center;
    margin:0 0 20px;
    cursor:pointer;
}
@media screen and (min-width:761px){
    .nav{display:block!important}
}
@media screen and (max-width:760px){
    .mobile-nav{display:block}
    .nav,.nav li,.nav li a{all:initial}
    .nav{display:none;}

}
</style>
</head>

<body>
<h1 class="wide-nav">Nav test</h1>
<div class="mobile-nav">Menu</div>
<ul class="nav">
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
        <li><a href="#">Menu item</a></li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
//  implement click menu for mobile -
jQuery(document).ready(function() {
        $("body").on( "click", ".mobile-nav", function() {
            $('.nav').slideToggle();
        });
});
</script>


                
</body>
</html>
7

I thought that might be what @santafe meant, but generally speaking, it’s the wrong way to go about things. If you write clean HTML/CSS then @media queries are quite easy to work with, and have been designed to achieve exactly what @santafe is after.

1 Like
8

Yes of course that’s true :smile:

9

If you want your visitors to be able to choose which stylesheet they want to use themselves and to disable the rest then this can be easily done using a few lines of JavaScript to change the rel attributes. Simply set up the active one with rel=“stylesheet” and the inactive ones with rel=“alternate stylesheet” and give eash a title attribute to identify them. You can then call the following script passing the title of the one you want to use to switch to using that one:

function changeStyle(title) {
var lnks = document.getElementsByTagsName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}

This also works without the JavaScript in browsers that have a stylesheet switcher built in.

As pointed out above, you don’t need to disable stylesheets where all of the information to determine what to use is available at the start. You can disable stylesheets though if you want your visitors to be able to switch the stylesheet themselves.

10

@felgall @PaulOB @kirkbeard @ralphm @RyanReese

First of all, I want to say Thank you!! to all who have offered their help and suggestions. Every post has been a tremendous help to me and I sincerely appreciate all the time everyone has spent on my behalf. I have only been at this HTML/CSS business for a month and I have learned a ton, but regardless, I am still a rookie - and I know that. No problem. I get it.

That said, I think I am trying to have my cake and eat it, too. By that I mean that I want to have the nice animated nav menu that is currently on this test website. But - at the same time, I want to have a completely different nav bar when the viewport width is reduced to about 960px or so. I ‘think’ I have the skill to simply incorporate a ‘hamburger’ style nav menu when the viewport is reduced via a media query, but in truth, this is not an easy tack for me to accomplish.

The smart thing for me to do would be for me to abandon my animated nav menu and just go the ‘hamburger’ menu route and be done with it. This would save me a lot of time and grief in so doing. I have a working model at the moment and it works fine. So that is where it stands for the time being.

Again, thanks to everyone who has posted their suggestions and help.

Here is the website in question: http://www.pabriles.com/home.html

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.