Hey everyone, I'm rebuilding a website for a group, and this site has three contrast option for the vision impaired, The way the site was built. There was a folder for each contrasts. So that means when ever I did an update. I had to copy it to two other folders besides the main one. Right now i rebuilt it with just one contrast. i still have the two other css files that control the two other contrast and font color changes. on the site i have three buttons that can be used to switch the contrast. Can I switch between three css files with a click of a button on the site?
That's kind of not they way I would approach the problem.
If accessibility was my only concern then I would create just one stylesheet but using using System colors. ( http://www.w3.org/TR/CSS2/ui.html#system-colors )It's a pretty good assumption that your users will already have the contrast set properly for them at the system level. Or I might specify several alternate stylesheets so they can pick one using their browser controls. Or perhaps I might do a combination of the two.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
I agree a 100% with you but this is what they want. This is what they have now, and you will noticed when you click one of the contrast buttons. it changes folders. Theres three of them for each contrast. I want to avoid haveing to do updates in three folders. But I do agree with you.
Would I put the first code in my header, and for the php. where would I put that?
First part is where ever you are making the links to where they can switch styles. Note, you'll need three links, one for each style. The PHP is in the <head> tag where you would be externally linking to the style sheets.
<h2> should be bold, ie <strong>, by default. If not, it can be handled via external CSS. Anchor tags are inline level tags and shouldn't have block level, ie <h5> tags inside of them. HTML 5 makes that statement blurry, but I still try to follow that rule. Just change the switch statement for the case parts to inverted and contract versus black and white. The index page obviously needs to be a PHP file type versus HTML.
I did a fly through reformat on the code but it's minor. You will want to double check stuff. Something to do that I didn't do because I didn't feel like investing the time is making a fourth CSS file that has CSS, which is included in all three versions. This way you link to that one and then determine which of the smaller CSS files you include.
You currently have over 1.2K lines of CSS with the three files. All 400+ lines is included for each CSS file you load. If you can take lets say 300 lines that are used in all three files and put it into one CSS file. You then load the 300 lines plus 100 for that version for a total of 400+. If somebody switches versions, you are now loading just the 100 lines for that specific version versus a brand new batch of 400+ lines, much of which is the same code.
To the ones I did? Yes. I would look at renaming them though. The names they have now are hardly descriptive. My guess is once you strip out the bulk of the CSS that is used in all cases the specific CSS files will be rather small. You are basically just switching colors.