Improve high-DPI support across Djblets.
Review Request #9260 — Created Oct. 10, 2017 and submitted
This introduces a series of improvements and fixes for high-DPI (Retina)
support across Djblets, focusing primarily on support forsrcset
attributes and the usage of@3x
(or higher) and SVG image files in
CSS.The Avatar
srcset
support has been made more general. Instead of
focusing entirely on avatars, the new support works on all image
elements. There's a few key differences in the new method:
The
srcset
capability check has been fixed. The old check attempted
to callget()
on the test element, which is actually intended to
perform an HTTP request. The result was thatsrcset
was never
marked as supported. The intent was to look up the DOM element from
the list, which has been fixed.The new method no longer attempts to parse an empty
srcset
or
change the image URL if the pixel ratio hasn't changed, reducing the
workload for images withoutsrcset
or when repeatedly called.The new method is also a standalone method, rather than a jQuery
method, lazily performing the DOM query only if needed, improving
performance on modern browsers that natively handlesrcset
.The old avatar method, introduced within the 0.10 release cycle, has
been removed. The only effective difference it had with the new support
was the addition of a CSS class, which wasn't used anywhere.The old
.at2x
CSS mixin has been replaced with a new.retina
mixin.
This one is based on the latest mixin from retinajs.com, but heavily
modified to allow usage of SVG files. When enabled, screen pixel ratios
higher than the highest ratio level (2x, 3x, etc.) specified will use
the SVG file instead, ensuring quality on all screen resolutions. The
mixin for this has moved to a new file (css/mixins/retina.less
), and a
a compatibility file and compatibility macro have been added.The integrations list has also been updated to use
srcset
.
Tested that the
srcset
support capability was reporting the correct
value.Tested that
.at2x()
continued to work as it did before.Tested the new
.retina()
with multiple density levels and with SVG
support.Tested that integrations were setting
srcset
correctly.Tested that datagrids were using SVGs when limiting the max density
level to 1 (forcing SVGs for Retina displays).
Description | From | Last Updated |
---|---|---|
Will autoprefixer not do the right thing here with respect to -min-device-pixel-ratio, etc.? |
brennie | |
The other code path returns undefined. |
brennie | |
Can you clarify that this is up to and including this value? It might also be more accurate to use … |
david | |
How about "2 through this number (inclusive) will be used"? |
david | |
File probably shouldn't be capitalized. |
david |
- Change Summary:
-
- Forced a math calculation on the LessCSS side, instead of having it on the CSS side. (This bug(?) was present in the upstream retina.less.)
- Updated
Djblets.enableRetinaImages
to never return any value.
- Commit:
-
e3a966221d307a8f01e08996caaac2fa032765d3a89891f571a7bb82599c799cf4617ee1728f1a48
Checks run (2 succeeded)
- Change Summary:
-
- Changed the terminology to "ratio".
- Filed capitalization of a word in the docs.
- Description:
-
This introduces a series of improvements and fixes for high-DPI (Retina)
support across Djblets, focusing primarily on support for srcset
attributes and the usage of @3x
(or higher) and SVG image files inCSS. The Avatar
srcset
support has been made more general. Instead offocusing entirely on avatars, the new support works on all image elements. There's a few key differences in the new method: -
The
srcset
capability check has been fixed. The old check attempted
to callget()
on the test element, which is actually intended to
perform an HTTP request. The result was thatsrcset
was never
marked as supported. The intent was to look up the DOM element from
the list, which has been fixed.
-
The new method no longer attempts to parse an empty
srcset
or
change the image URL if the pixel ratio hasn't changed, reducing the
workload for images withoutsrcset
or when repeatedly called.
-
The new method is also a standalone method, rather than a jQuery
method, lazily performing the DOM query only if needed, improving
performance on modern browsers that natively handlesrcset
.
The old avatar method, introduced within the 0.10 release cycle, has
been removed. The only effective difference it had with the new support was the addition of a CSS class, which wasn't used anywhere. The old
.at2x
CSS mixin has been replaced with a new.retina
mixin.This one is based on the latest mixin from retinajs.com, but heavily modified to allow usage of SVG files. When enabled, screen pixel ratios ~ higher than the highest density level (2x, 3x, etc.) specified will use ~ higher than the highest ratio level (2x, 3x, etc.) specified will use the SVG file instead, ensuring quality on all screen resolutions. The mixin for this has moved to a new file ( css/mixins/retina.less
), and aa compatibility file and compatibility macro have been added. The integrations list has also been updated to use
srcset
. -
- Commit:
-
a89891f571a7bb82599c799cf4617ee1728f1a48d850fc332ce53c6ad3d0f152bc1b4e112fd3e390