-
-
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 [email protected], | |
| * 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); | |
| } |
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.
@kamranayub Thanks for the comment, I'm sure other users will find that helpful!