I'm a Web Development and Programming student, and through my course, I've found that I'm particularly interested in using Responsive Web Design for "Inclusive and Accessibility" oriented Web Development.
I'm trying to make my website using HTML5 (trying to be as strict as possible, a-la XHTML, and trying to be as valid as possible), I’ve come across a problem in allowing my CSS (colours, fonts, etc...) to more or less take backseat to whatever the user needs in order to use the website.
One thing that I had picked up from Heydon Pickering’s book “Inclusive Design Patterns” is the use of:
<link rel="stylesheet" href="main.css" media="none" onload="if(media!='all')media='all'"/>
It sounds great, but it fails to validate (using validator.w3.org) because:
Error: Bad value none for attribute media on element link: Media query ended prematurely.
I understand that I could just use Javascript (jQuery, or such), but in keeping with Progressive Enhancement, I need to make it usable regardless of whether or not Javascript is enabled or not (It’s not my place to force those things on the user).
My main question is, Is there a way I achieve allowing my CSS to be overridden client-side so the user can use settings, that allow them to make the most of their web browsing experience, without the use of Javascript, or just straight up not have valid HTML?
I'm still not that fantastic at overall web-design or programming yet, but It's something I really want to continue doing. and I would be gracious for any and all help relating to this.
Thank you so much.
Is there a way I achieve allowing my CSS to be overridden client-side so the user can use settings, that allow them to make the most of their web browsing experience, without the use of Javascript, or just straight up not have valid HTML?
Many browsers including Chrome and Firefox have a feature called user stylesheets that allows users to implement custom CSS for a variety of use cases, including accessibility enhancements (e.g. making text larger, or increasing contrast). This functionality is already built-in and does not require any third-party extensions, but extensions like Stylish exist that help manage user stylesheets.
As it is entirely client-side, and already built-in, you do not need to do anything as an author to enable this on your site.