-
-
Save brandonb927/3874012 to your computer and use it in GitHub Desktop.
| /** | |
| * I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss | |
| * | |
| * Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property. | |
| * - Updated retina media query to be more reliable () | |
| * Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html | |
| * Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy | |
| * Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up | |
| * Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of | |
| * Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/) | |
| * Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629) | |
| */ | |
| .image-2x(@image, @width, @height, @repeat: no-repeat) { | |
| @filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`; | |
| @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`; | |
| background-image: ~`"url(@{filename}.@{extension})"`; | |
| background-repeat: @repeat; | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2), | |
| only screen and ( min--moz-device-pixel-ratio: 2), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1), | |
| only screen and ( min-device-pixel-ratio: 2), | |
| only screen and ( min-resolution: 192dpi), | |
| only screen and ( min-resolution: 2dppx) { | |
| /* on retina, use image that's scaled by 2 */ | |
| background-image: ~`"url(@{filename}@2x.@{extension})"`; | |
| background-size: @width @height; | |
| } | |
| } | |
| /** | |
| * The filename convention for the retina-sized image is image@2x.png, | |
| * but of course you can change this in the mixin when you use it | |
| */ | |
| .image-logo { | |
| width: 100px; | |
| height: 50px; | |
| .image-2x('image.png', 100px, 50px); | |
| } | |
| .reapeating-background-image { | |
| background-color: #444; | |
| .image-2x('image.png', 200px, 200px, repeat); | |
| } |
@kamranayub cheers.
Now working fine in CodeKit for Mac.
@kamranayub Thanks for the comment, I'm sure other users will find that helpful!
I've ammended this Gist based on the Wordpress Core which seems to target far more devices than mine. Thanks @WordPress! <3
- This is nice. I'm gonna use it. Thanks for making & maintaining this gist!
- I think this can be cleaned up a bit...several unnecessary or redundant tests. In WordPress' implementation, http://core.trac.wordpress.org/ticket/22238#comment:5 notes the reasons for only needing 3 particular tests. Now, I could definitely be wrong or missing some edge cases you're tracking...but if that's case, I'd love to know, and also see notes made.
@kbav some of the tests may be redundant I'm sure, I've left them in for legacy-sake. I will be doing som more thorough testing in the future so as to keep up on which test/edge cases are still necessary anymore. Also, gonna check out that @WordPress ticket.
Thanks for using my gist :)
I guess on line 14 there should NOT be @2x ?
@SpadarShut I forgot to update the example usage, it is correct now
You’ve still got the @2x on the non-retina background-image value.
Seeing false positives using that media query (i.e. Chrome on Mac is displaying the retina asset). The media query in Preboot is better and would improve this mixin. 😁
Thanks for the headsup @joshuabaker, that was actually a bug that was accidentally left in which I had fixed outside of this LESS file at some point.
Note, if you try this using Mindscape Web Workbench's compiler (for us Visual Studio users), it will most likely fail. To fix it, put the media query value into a variable like this:
Then use it like this:
That will work.