Awesome CSS Tips
@AwesomeCSS
Awesome CSS Tips, disagree with anything? Spark up!
You might like
Tip: Using RGBA to set font/background colours? Don't forget to provide a fallback, browsers that don't support it won't show any colour.
Try to keep everything flexible, so if the right column were to become the left then the class names still make sense!
Tip: Use sensible class names + IDs! Don't name something .redheading if it might become blue later on! Keep colours/sizes etc out of there!
Make sure you always set a font size though, with the previous tip it could be easy to forget on certain elements and they'll come out tiny!
Tip: If you set your base font size to 10px it makes it really easy setting fonts later on, 14px? 1.4em! 16px 1.6em! #csstotd
manage where they are in the list. Check out this link for an example! w3.org/TR/2010/WD-wai…
Listing out a load of search results? Using paging? Then take a look at aria-posinset and aria-setsize for a friendly way to help people...
More tips coming tomorrow! If you have any questions about the tips today or accessibility please ask away :) whatever it is!
Define WAI-ARIA roles on your pages! It helps identify specific areas of the site for screen reader users… paciellogroup.com/blog/2010/10/u…
Check out the Card Stock field here for an example of how this works! cardcream.com/upload.php look for aria-describedby="…"
Luckily there's an easy solution, you can tell the screen reader that a certain field is "described by" another element...
… any non form elements. So those useful field description in paragraphs to help users, won't be read at all! :) ...
Next WAI-ARIA tip for today… when a screen reader enters a form, did you know it goes into "Forms Mode"! and it won't read out...
If you're looking to do some testing of your own with a screen reader I highly recommend NVDA, free and fantastic nvda-project.org
Finally do some reading on aria-live. This can be set to polite, assertive or off. And will interrupt the user or not depending on state.
This is very useful when returning error messages, updating messages, character counts ala twitter and much more...
… when the content changes in that element! The changed content will be read out to the user as if they'd just happened upon it!
This is where WAI-ARIA shines, adding the attribute aria-atomic="true" to an element or parent container will notify the screen reader...
Screen readers read through a web site in a linear fashion, they're not aware when content changes on the page unless you tell it!
United States Trends
- 1. #BUNCHITA 1,906 posts
- 2. #SmackDown 41.9K posts
- 3. Aaron Gordon 1,943 posts
- 4. Tulane 3,460 posts
- 5. Giulia 13.7K posts
- 6. Supreme Court 178K posts
- 7. #OPLive 2,203 posts
- 8. Connor Bedard 1,971 posts
- 9. #TheLastDriveIn 2,973 posts
- 10. Caleb Wilson 5,325 posts
- 11. #BostonBlue 4,172 posts
- 12. Podz 2,387 posts
- 13. Northwestern 4,717 posts
- 14. Scott Frost N/A
- 15. Rockets 19.9K posts
- 16. Westbrook 4,876 posts
- 17. Frankenstein 71.3K posts
- 18. Zach Lavine N/A
- 19. Memphis 15.3K posts
- 20. Chelsea Green 5,926 posts
Something went wrong.
Something went wrong.