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 do you override CSS applied by jQuery UI theme properly?

    how to make css for work for different mobile sites

    How to fast-blur in css/js?

    How to using CSS to set content of column to top not center in JSF, primefaces?

    How to get a property from other class in CSS?

    How can I set a height of document [duplicate]

    How can I style a select option like a table?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to select an element's great-grandchild for CSS rules?

    background image not showing on nested

    How to lazyload svg image given in css?

    how to get css of a clicked div using jquery?

    How can I add a fixed sidebar to a web page?

    How to transform simple CSS box

    Error: Dynamically fetching css from CDN with fallback to local copy, How to resolve?

    Javascript/Jquery How to catch the use of a CSS class

    How to move one element to the right of another using CSS?

    How to apply a class on
  • when mouse is hovering on it?
  • Rails4: How to create Image Links with Hover?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    Height isn't showing up full on everything except Chrome

    how to inherit classes in css

    How to vertically center items in a div while keeping responsiveness? [duplicate]

    How to add arrow beside some links in CSS?

    How to use relative referencing in CSS files

    How to use selenium IDE to find/check if a div object has children?

    (some) background images won't show up in IE7 or IE8

    How To Disable Pop Up Google Translation With HTML CSS

    How to color the first word using CSS

    How to apply custom css to android Webview when URL is from internet server?