Implementing Media Queries in an editor
By glazou on Thursday 23 June 2016, 15:57 - CSS and style - Permalink
You're happy as a programmer ? You think you know the Web ? You're a browser implementor ? You think dealing with Media Queries is easy ? Do the following first:
Given a totally arbitrary html document with arbitrary stylesheets and arbitrary media constraints, write an algo that gives all
h1
a red foreground color when the viewport size is betweenmin
andmax
, wheremin
is a value in pixels (0 indicating nomin-width
in the media query...) , andmax
is a value in pixels or infinite (indicating nomax-width
in the media query). You can't use inline styles, of course.!important
can be used ONLY if it's the only way of adding that style to the document and it's impossible otherwise. Oh, and you have to handle the case where some stylesheets are remote so you're not allowed to modify them because you could not reserialize them :-)
What's hard? Eh:
- media attributes on stylesheet owner node
- badly ordered MQs
- intersecting (but not contained) media queries
- default styles between MQs
- remote stylesheets
- so funny to deal with the CSS OM where you can't insert a rule before or after another rule but have to deal with rule indices...
- etc.
My implementation in BlueGriffon is almost ready. Have fun...