Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-uri: adds inline-image() to embed data-URIs #775

Closed
wants to merge 1 commit into from

Conversation

gorakhargosh
Copy link

The "inline-image" function reads images, encodes them
using base64 encoding, and embeds them into the generated
CSS files as data-URIs.

More about data-URIs:
http://en.wikipedia.org/wiki/Data_URI_scheme

This causes a significant reduction in the number of
HTTP requests sent although it increases the size of the
resulting CSS code. Multiple occurrences of the same data-URI
are easily handled by server-side GZIP compression and hence
redundancy should not be a drawback for the majority of the
client audience.

The original author of this patch is:
Marc Boeker marc.boeker@onchestra.com

The "inline-image" function reads images, encodes them
using base64 encoding, and embeds them into the generated
CSS files as data-URIs.

More about data-URIs:
http://en.wikipedia.org/wiki/Data_URI_scheme

This causes a significant reduction in the number of
HTTP requests sent although it increases the size of the
resulting CSS code. Multiple occurrences of the same data-URI
are easily handled by server-side GZIP compression and hence
redundancy should not be a drawback for the majority of the
client audience.

The original author of this patch is:
Marc Boeker <marc.boeker@onchestra.com>
@marcboeker
Copy link

Thanks for submitting :)

@matthew-dean
Copy link
Member

Cool function. Probably should be a note that the resulting CSS is only IE8+ compatible and max URI length in IE8 is 32KB.

@marcboeker
Copy link

What is IE? Never head of it yet. Can I eat this? :)

Yeah absolutely, we should mention to use this feature with caution.
@gorakhargosh Would it be possible to add this side note to your pull request and submit it again? Thank :)

@gorakhargosh
Copy link
Author

Actually, we could add a command line flag that allows
toggling "inline-images" to work like "url" so that a separate
stylesheet can be generated for IE for those who wish to.

Alternatively, this can also be handled by using "url" to target IE directly using
CSS selector classes .ie9, .ie8, which HTML5 bootstrap provides you with.

So for IE, you'd write:

.lt-ie7 #some-element {
background-image: url("blah.png");
}

But this does mean that these resources will be downloaded
by all other browsers as well, so I cannot see any advantages
to doing this. Being able to generate a separate stylesheet
seems advantageous.

Or does anybody have better suggestions?

@marcboeker
Copy link

Hm or we just inform the developer, that IE has limited support for data-uri's and let it up to the developer to find a solution.

I'm personally not a friend of patching anything to make it work in IE. Everyone who has to support IE already knows a viable solution to switch between data-uri's and an extra stylesheet for IE.

In the long term, IE (I hope) will support regular data-uri's like most of the other browsers too. And until that, we should use an extra stylesheet.

@gorakhargosh What do you think?

@gcoop
Copy link

gcoop commented May 15, 2012

+1 for this and I agree with @marcboeker everyone who's using less will know how to use an extra stylesheet for IE if they want to support.

@myurasov
Copy link

+1!

@myurasov
Copy link

I guess in web browser this function should act as a bypass to "url(...)"

@matthew-dean
Copy link
Member

I think other things need to be resolved before this could happen. For instance, does a URL reference that I would use to pull the image relative to the LESS file? Or the resulting CSS file? Documentation on that is not clear.

And, as far as I can tell, this would only work in Node-based compilation, correct? If so, this would break browser testing or HTML-based LESS systems.

@maxcan
Copy link

maxcan commented Aug 2, 2012

For HTML-based compliation it would work if it just "noop'ed" to a url(xxx)
value.

Compass and stylus have no problem with it use the working directory the
command is run from as the root though it can be overridden with a command
line argument.

On Wed, Aug 1, 2012 at 4:04 PM, matthewdl <
reply@reply.github.com

wrote:

I think other things need to be resolved before this could happen. For
instance, does a URL reference that I would use to pull the image relative
to the LESS file? Or the resulting CSS file? Documentation on that is not
clear.

And, as far as I can tell, this would only work in Node-based compilation,
correct? If so, this would break browser testing or HTML-based LESS systems.


Reply to this email directly or view it on GitHub:
#775 (comment)

@custa1200
Copy link

Is this functionality in .LESS 1.3.0 ? i.e. the current shipping version?

@keithamus
Copy link

Would like to get this functionality in a project I'm working on. Compass (SASS) has had this for a while now: Compass/compass@5a015b3

@jgallen23
Copy link

Any update on this pull request?

@lukeapage
Copy link
Member

could aim for 1.4.0

We're not ignoring pull requests - we've gone from 70 to 17 in 6 months. The fact it hasn't been closed is a good thing ;)

@jneen
Copy link
Contributor

jneen commented Dec 23, 2012

A more general solution might be a function data-uri, which you could use like this:

#selector {
  background-image: data-uri(image/jpeg, path/to/some/image.jpg);
}

One advantage here would be that it could also be used for things like fonts, for example:

@font-face {
  font-family: MyCoolFont;
  src: data-uri(font/ttf, path/to/my-cool-font.ttf) format("truetype");
}

jneen added a commit to jneen/less.js that referenced this pull request Dec 23, 2012
as described in a comment on less#775
@lukeapage
Copy link
Member

closing to take #1086 instead as it has several improvements.

@lukeapage lukeapage closed this Dec 28, 2012
lukeapage pushed a commit that referenced this pull request Jan 4, 2013
as described in a comment on #775
lukeapage pushed a commit that referenced this pull request Jan 5, 2013
as described in a comment on #775
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.