What is the interaction between CSS and URL fragments (the #stuff)?

Question

What is the interaction between CSS and URL fragments (the #stuff)?

Can URL fragments affect CSS behavior? For instance, let's consider a sample page at:

http://example.boom/is_this_a_bug.html

. You can view the code for this page on https://gist.github.com/3777018

Upon loading the page with the given URL, the elements with the class .tab-pane do not appear correctly because they extend beyond their container, which has an overflow: hidden property.

Interestingly, if we load the page with a valid fragment added to the URL (e.g., #00), the .tab-pane becomes visible, seemingly disregarding the left:100% property. Clicking on the button removes and then resets left:100%, resulting in the overflowing tab-panes once again.

This behavior has been noted in Firefox 15.0.1 and Chromium 18.0.1025.168 browsers on Ubuntu 12.04.

Do you have any insights into why this is happening? Is this a known issue, or perhaps documented elsewhere?

Thank you,

Manuel.

css url firefox chromium

Answer 1

Answer №1

Upon loading a page with a fragment identifier in the URL, the browser will automatically scroll to display the element matching the ID in view.

Answer 2

Upon loading a page with a fragment identifier in the URL, the browser will automatically scroll to display the element matching the ID in view.

Answer 3

Answer №2

One potential solution is to utilize JavaScript for implementing styles.

(function applyStyle() {

    if (window.location.hash == '#COLOR') {
        var css = document.createElement('style'),
            s = document.getElementsByTagName('script')[0],
            styles = 'body { background-color: #b0c4de; }';

        css.type = 'text/css';

        if (css.styleSheet) {
            css.styleSheet.cssText = styles;
        } else {
            css.appendChild(document.createTextNode(styles));
        }
        s.parentNode.insertBefore(css, s);
    }
})();

Answer 4

One potential solution is to utilize JavaScript for implementing styles.

(function applyStyle() {

    if (window.location.hash == '#COLOR') {
        var css = document.createElement('style'),
            s = document.getElementsByTagName('script')[0],
            styles = 'body { background-color: #b0c4de; }';

        css.type = 'text/css';

        if (css.styleSheet) {
            css.styleSheet.cssText = styles;
        } else {
            css.appendChild(document.createTextNode(styles));
        }
        s.parentNode.insertBefore(css, s);
    }
})();

What is the interaction between CSS and URL fragments (the #stuff)?

Answer №1

Answer №2

Similar questions

Using CSS3 to shift a div in relation to another moving div

The min-height property in CSS appears to be ineffective on Jelly Bean

Error: The path to the driver executable must be specified using the webdriver.gecko.driver system property when using Selenium GeckoDriver

Header formatting issue when attempting to implement tablesorter plugin

The HTML div element is not expanding to the full width of the screen on an iPhone device

There seems to be a problem with jQuery adding "#!/undefined" to the URL, causing issues with the back functionality

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

What is the best method for creating a top margin that is dependent on the height of the browser?

Utilizing Flexbox for a standalone section

Hover effects using CSS3 transitions for the content before

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

When hovering over different <a> tabs, showcase various images in individual <div> sections

Flexible layout of perfectly square elements

The incorrect display of right-to-left text is indicated by a number followed by a dash and

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Retrieve the appended element's object

Create a canvas and include input boxes in an HTML document

Reduce the size of your CSS files using Gulp through the .pipe method

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Can someone help clear up this confusion with CSS?