How to hide and retrieve a URL in CSS with Javascript


Tags: javascript,css,responsive-design

Problem :

In CSS, I want to be able to specify a background image for a given selector without it actually being downloaded or rendered. I then want to be able to read the image URL with javascript, modify it in js, and then apply the modified URL to the selector for real so it will actually download and display. (I suppose that last part will have to be done with jQuery directly changing styles on each element, but that is not what this question is about.) This is part of some devious thing I'm trying to make really easy responsive images.

I have tried:

.sneaky {
    background: url("youcantseemeyet.jpg");
    background-image: url("blank.jpg");
}

But I can't find a way for javascript to know about the original background property.

Also tried:

.sneaky:after {
    background: url("youcantseemeyet.jpg");
}

But I don't think javascript can see pseudo-elements.

Also tried:

.sneaky {
    x-background: url("youcantseemeyet.jpg");
}

and:

.sneaky {
    background: x-url("youcantseemeyet.jpg");
}

But I think javascript just tosses custom properties/values out the window.

How do CSS Polyfills work? Because they allow you to use CSS properties and values that would normally be invalid in a browser, so how does javascript access the CSS?

Another idea: I don't suppose there is a way to pre-empt the CSS with javascript, read the url() but block the file from downloading, is there?



Solution :

I figured out what to do. Kind of obvious now that I thought about it. Just hide the desired URL in a query string, like: url('/img/placeholder.gif?/path/to/real/image.jpg'). Ah, query strings, I love them.

UPDATE A problem with using a query string is that every unique query string still results in a new HTTP request, even if it is ultimately returning the same resource. So, alternatively you can use a hash mark, like url('/img/placeholder.gif#/path/to/real/image.jpg'). When the image is requested, it will completely ignore the hash tag part, BUT you can still retrieve that information with javascript. It is just a bit tricky. Assuming you have no other URLs with hash tags in them (because why would you), you can simply retrieve a list of all selectors in all stylesheets which do use the hash tag part with the following script.

var selection = []
  , sheets = document.styleSheets
  , sheet, rule, i, j

for (i in sheets){
    sheet = sheets[i]
    for (j in sheet.cssRules) {
        rule = sheet.cssRules[j]
        if (/url\(.*#.*\)/.test(rule.cssText)) selection.push( rule.selectorText );
    }
}

    CSS Howto..

    How to wait a while before adding elements in css? javascript?

    css how to fix layout in table

    Odd visual effect (little line shows) when hovering over button in browser

    how to change color of href on hover

    How to assign CSS to mobile page in asp.net

    How can I add a consistent left margin to a checkbox label?

    How to clip canvas with CSS clip-path?

    How to write css rule with variable to change font-size?

    How to create CSS heart? / Why is this CSS creating a heart shape?

    How to retrieve the real height of a #div (including overflowed parts)

    How do I float a
  • to the right in CSS?
  • how do i make the “box-shadow” to the whole div

    How can I fade in a div on hover with jquery on top of image with animated rollover

    How to display Highcharts in rows (5)

    How to clip inside a box in css?

    How do I use li:hover to change the WHOLE li color?

    How to break a table with CSS diagonally or vertically?

    How do I specify in HTML or CSS that a table column should have the minimum width

    How can I differentiate Safari and Chrome in CSS?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to fit the content of the site in any resolution CSS

    How to scroll beyond fixed position elements on a page with TOC without using JS?

    What is the ::content pseudo-element and how does it work?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    jQuery .animate() sets display:none, how to avoid?

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    How to achieve this diagonal drop down effect with CSS?

    How to get drop down menu sub lists to line up vertically

    how do i change image width in jCarousel?

    How to display element on screen but not at the top of the screen in html/css?