Hi,

Among other things, switching to mobile view on a "desktop" Web browser disables the "advanced" 
stylesheet through a tiny bit of JavaScript code that sets the "disabled" attribute on the appropriate 
<style> element.

There is a bug in WebKit that affects Safari and Google Chrome. The "disabled" 
attribute is not (always) taken into account when set:
https://bugs.webkit.org/show_bug.cgi?id=25287

In short, switching to mobile view with Safari and Google Chrome only switches some of the styles (styles 
that rely on the presence of a "w3c_screen" class name on the <body> element get 
correctly deactivated, those that rely on the presence of a "w3c_handheld" class name get 
correctly activated), but some styles from the advanced style sheet still get applied, in particular for 
event dates, leading to a weird layout (dates overflow the visual date background in that case).

From a standard perspective, I note that the "disabled" attribute on the 
<style> element is being standardized within HTML5 and CSSOM but was not defined in HTML4 
/ XHTML 1.0, AFAICT:
 http://dev.w3.org/html5/spec/semantics.html#the-style-element
 http://dev.w3.org/csswg/cssom/#dom-stylesheet-disabled

I suppose a possible workaround would be to remove the <style> element 
altogether while switching to mobile view (it could be kept in memory and re-inserted 
in the DOM if the user decides to switch back to desktop view).

Thanks,
Francois.

Reply via email to