{ CSSBS+ }

CSS Browser Selector Plus


A JavaScript library to support 

cross-browser responsive design

#css_browser_selector_plus {
    Richard Duchatsch Johansen: (@ridjohansen);
    Talita Pagani: (@talitapagani);
    Phd Cesar Augusto Cusin: (@cesarcusin);
}

The Authors

Richard Duchatsch Johansen
Senior Front-end Developer @ Eventials.com and W3C.br Accessibility Specialists Member
Talita Pagani Britto
Assistant Coordinator of Educational Projects @ MStech.com.br 
PhD. Cesar Augusto Cusin 
Professor @ Faculdade Paraíso do Ceará 
and W3C.br Accessibility Specialists Member


The Problems



  • The W3C CSS Validation

  • Cross-platform development

  • CSS3 Media Queries Support

  • Browsers on other OS

  • Retina Displays

  • dataURI image support

CSS3 MEDIA QUERIES


  • Maximum viewport width of 480px
    @media screen and (max‐width:480px) { ... }

  • Landscape orientation
    @media all and (orientation:landscape) { ... }

  • Widescreen displays (16:9)
    @media screen and (device‐aspect‐ratio: 16/9) {...}

  • Display with minimum width of 400px and maximum of 700px 
    @media (min‐width: 400px) and (max‐width: 700px) {...}

Fallbacks and Polyfills


  • css3-mediaqueries-js: the most used to empower the use of media queries in older browsers.

  • Respond.js: JS polyfill to support only the min/max-width of CSS3 Media Queries

  • Mediatizr: JS library to allow media queries support to older browsers

  • matchMedia: polyfill helper to test on JavaScript whether a CSS media type or media query applies

  • jQuery Media Helpers: jQuery Media Helpers is a utility script to handle cross-browser media queries features and behavior on JavaScript

PROPOSED SOLUTION


  • open-source library

  • single JavaScript (JS) file

  • created to empower CSS selectors

  • write specific CSS code for different OS / browsers

  • Similar to Modernizr

  • classes to the <html>

Proposed Solution


  • Media Queries-like alternative method


Supports


  • Device orientation

  • Screen Width (Bootstrap Breakpoints)

  • dataURI Base64 <img/>

  • Pixel ratio Selector (Retina display detection)

Syntax


.[feature1][.[feature2][…].[featureN]] [.class|#ID|tag] {  property: value;}

  • Landscape orientation
    <html class=”orientation_landscape”>

  • No support to HiPDI and support to DataURI 
    <html class=”no‐hidpi datauri”>

  • Minimum screen width of 980px and maximum width of 1199px in portrait orientation
    <html 
class=”orientation_portrait 
minw_980 maxw_1199”>





Sample Codes

Conclusions


  • CSSBS+ is a lightweight script to allow web developers work with responsive web design for a wide variety of web browsers;

  • Friendly Syntax;

  • Alternative Method;

  • Valid Code!



ACKNOWLEDGMENTS




  • Special thanks to Professor PhD. Cesar Augusto Cusin for mentoring this project since its first steps.





Thanks



 




Questions?

deck

By Richard Duchatsch Johansen

Made with Slides.com

deck

  • 2,437

More from Richard Duchatsch Johansen