CSS Browser Selector Plus: A JavaScript Library to Support Cross-browser Responsive Design Richard Duchatsch Johansen Talita C. Pagani Britto Cesar Augusto Cusin W3C Accessibility WG Member and Assistant Coordinator Professor at Faculdade Paraíso do Senior Front-end Developer at of Educational Projects - MStech Ceará and W3C Accessibility WG Eventials – Rua Itapaiúna, 2434 Rua Joaquim Anacleto Bueno, 1-42 Member – Rua da Conceição, 1228 São Paulo – SP – Brazil, Zip Code Bauru – SP – Brazil, Juazeiro do Norte – CE – Brazil, 05707-001 Zip Code 17047-281 Zip Code 63010-465 +55 14 9711-7983 +55 14 3235-5500 +55 15 8100-4466 [email protected] [email protected] [email protected]
ABSTRACT means you can use CSS Media Queries to tweak a CSS for a Developing websites for multiples devices have been a rough task mobile devices, printer or create a responsive site. for the past ten years. Devices features change frequently and new Media queries is an extension to the @media (or media=”” devices emerge every day. Since W3C introduced media queries attribute, in tag) specification on CSS, allowing in CSS3, it’s possible to developed tailored interfaces for multiple declaration of conditional queries expressions to detect particular devices using a single HTML document. CSS3 media queries media features, such as viewport width, display color, orientation have been used to support adaptive and flexible layouts, however, and resolution [1], as shown on Table 1. it’s not supported in legacy browsers. In this paper, we present CSS Browser Selector Plus, a cross-browser alternative method Table 1. Example of CSS3 media queries expressions using JavaScript to support CSS3 media queries for developing Feature Query responsive web considering older browsers. Maximum viewport @media screen and (max‐ width of 480px width:480px) Categories and Subject Descriptors @media all and D.3.3 [Programming Languages]: Language Constructs and Landscape orientation (orientation:landscape) Features – frameworks. Widescreen displays @media screen and (device‐ H.5.2 [Information Interfaces and Presentation (e.g., HCI)]: (16:9) aspect‐ratio: 16/9) User Interfaces – standardization. Display with minimum @media screen and (min‐width: H.5.4 [Information Interfaces and Presentation (e.g., HCI)]: width of 400px and 400px) and (max‐width: 700px) Hypertext/Hypermedia – architectures. maximum of 700px
Keywords Its basic syntax consists of: Responsive Web Design, cross-browser, web standards, @media
27 include min-width/max-width, min-device-width/max- resource. In CSS, this is used in background/background‐image device-width [4]. to specify binary codes for images encoded in base64 encoding, matchMedia: The script matchMedia is a polyfill helper to improving web page performance since the browser doesn’t need test on JavaScript whether a CSS media type or media query to make an HTTP request to load a resource. Data URIs have applies, however, it doesn’t empower the use of media been supported by Internet Explorer 8.0+ (partial support), queries in CSS documents. MatchMedia is used in Firefox 16.0+, Chrome 23.0+, Safari 5.1+, Opera 12.1 [10], Respond.js [5]. considering desktop browsers. Figure 1 shows how it’s possible to jQuery Media Helpers: Similar to matchMedia, jQuery deal with browser that support Data URI and browsers that don’t Media Helpers is a utility script to handle cross-browser support it, presenting a regular file URL. media queries features and behavior on JavaScript, not being applicable to enable cross-browser media queries in CSS [6]. However, current polyfill libraries available detects only a subset of media queries features, usually [device‐]