What is the best way to prevent the initial stylesheet from loading when a mobile stylesheet is applied?

<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)'/>

Within my HTML document, I include these two lines. The first line refers to my standard style sheet, while the second line pertains to my mobile style sheet, which is activated when a mobile device is detected by the browser. These two stylesheets are both loaded simultaneously. Is there a way to counteract the impact of index.css whenever handheld.css is triggered?

htmlcss

Answer №1

To disable a stylesheet directly may not be possible, but you can counteract the effects of a previous stylesheet by overriding its CSS rules.

Another option is to introduce a third stylesheet or implement media query rules to only apply certain CSS styles on non-mobile devices. For example:

<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)'/>

It's important to note that these methods require support for CSS3 min/max media queries. If you need to cater to older browsers that do not support this feature (such as IE6/IE7/IE8), consider using a polyfill like Respond (https://github.com/scottjehl/Respond).

Answer №2

Utilizing media queries doesn't necessarily mean you can completely 'cancel' their use, but rather just 'stop' using them.

Here is an example:

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

/* This will only apply when the screen size is large */
<link href="desktop.css"
    media="only screen and (min-width: 801px)" rel="stylesheet"/>

/* This will be used for tablets */
<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 will be applied in specific cases that you need to figure 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"/>

For more information, you may refer to this SO answer and explore further on MozDevNetwork

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

cssvertical-alignment

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload

Set the background of the vue widget to be completely see-through

I have a project where I am creating a widget using Vuetify, and embedding it into another website in the following way: <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="component-styl ...

javascripthtmlcssvue.jsvuetify.js

Performing calculations involving both select and checkbox input values, as well as handling negative numbers

Seeking assistance in creating a feature where users can select a billing term from a dropdown and then choose checkboxes to add to the total. While it works fine on JSFIDDLE, I encounter issues on my website - specifically when selecting all checkboxes, r ...

javascriptjqueryhtmlcsscheckbox

The highlight_row function seems to be delayed, as it does not trigger on the initial onClick but works on subsequent clicks. How can I ensure it works properly right from the first click?

I developed an application using the Google JavaScript Maps API to calculate distances between addresses. I've encountered a bug where the row in the table is not highlighted on the first click, requiring a second click for the highlighting to take ef ...

javascripthtmlcssreactjsgoogle-maps

Issue with title position when hamburger menu opens

My title, "Roberto Salas," is not staying in place when I resize the window or view it on my cellphone. You can see an example of this issue here. If the hamburger menu button drops down, the title is also not in the correct position. See an example here. ...

javascripthtmljquerycssbootstrap-4

Substituting Div containers with elements imported from external files

Imagine I have <div> <div id="stuff"> <!-- stuff --> </div> </div> Could I move the content of <div id="stuff"> into a separate file named stuff.html, and then replace the code above with something simi ...

htmlangularjs

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

Extend child flex boxes vertically when the main axis is horizontal

My flex boxes have the flex-direction set to row and align-items set to stretch. Despite setting align-self to stretch for the child boxes, they only fill the top part of the browser window. Can someone help me troubleshoot this issue? #containerDiv { ...

htmlcssflexbox

How can I switch the visibility of two A HREF elements by clicking on one of them?

Let me break it down for you in the simplest way possible. First off, there's this <a href="#" id="PAUSE" class="tubular-pause">Pause</a> and then we have a second one <a href="#" id="PLAY" class="tubular-play">Play</a> Al ...

javascriptjqueryhtmlcsstubular

Using a combination of CSS, Ajax, and jQuery, dynamically insert new rows into a table generated within a div

Apologies for the awkward question. I am currently working on a solution to create a table using div tags, which is functioning properly. However, I am facing an issue with adding or removing a row using jQuery. The problem lies in the fact that when a new ...

jquerycssajax

My goal is to utilize CSS grid to craft a unique layout by establishing a grid area. However, the layout is not functioning as anticipated

Currently, I am in the process of mastering CSS grid layout design. If you are curious to see my progress so far, check out this Codepen link showcasing my code. Additionally, for a visual representation of the layout, feel free to view the layout image ...

htmlcsslayoutresponsive-designcss-grid

What is the best method for retrieving data from a database using PHP?

Currently, I am dealing with a specific issue regarding reading an auto-incremented value and utilizing it in my database. Here is the structure of my database: mysql_query("INSERT INTO category (category,image) VALUES ('$name','$default_ite ...

phphtmlmysqldatabase

ReactJS Material UI Horizontal Menu with CSS Styling

I am currently working on creating a horizontal menu with ReactJS and Material UI. However, I am facing a challenge where the menu is not responsive. Even when I resize the browser window, the menu size remains the same and only updates when I refresh th ...

cssreactjsecmascript-6material-ui

Unable to load CSS styles from SCSS when rendering the view

I am having trouble loading styles on my webpage from SCSS. Below is the code from my Gulp.js file: // Compile and Automatically Prefix Stylesheets gulp.task('styles', function () { return gulp.src([ 'Content/styles/**/*.scss&apo ...

cssangularjsgulp

Retrieve the href value from a DOM element

I'm currently working on a piece of code that aims to extract only the hrefs from the nav section. Here's what I have so far: componentDidMount(){ $("nav ul li a").each(function(k, j){ console.log(j); }); } So far, I've bee ...

javascriptjqueryhtmlreactjs

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

javascriptjqueryhtml

Double loading issue with jQuery AJAX

I'm currently working on a website and I've encountered an issue. Below is the jQuery code that I am using: $('input[type="text"][name="appLink"]').keyup(function() { var iTunesURL = $(this).val(); var iTunesAppID = $('i ...

phpjavascriptjqueryhtml

Align the footer vertically with Bootstrap 4, ensuring it stays in line with columns and rows

Seeking a solution to vertically align the 2 rows within the footer, both arranged using a Bootstrap grid. My attempt involved creating a content wrapper and utilizing a conventional flexbox solution: display: flex; align-items: center. However, this caus ...

cssbootstrap-4

Create a DIV element that completely fills the vertical space available

My webpage is currently looking quite empty, with only one DIV element present: <div style="height: 20%; min-height: 10px; max-height: 100px; width: 100%; background-color: blue;"></div> I' ...

csshtml