![]() Media queries aren’t limited to just viewport size. rocket class, we can tell the SVG to flip around and change from red to blue when the browser’s viewport is more than 600px wide, much like styling any other HTML tag. ![]() For example, let’s take this cute SVG rocket: SVG plays well with media queries, a feature of CSS that lets you describe how something should look under certain conditions, such as minimum applicable browser viewport size. Rather than writing and maintaining complicated and brittle state-managing Javascript, work with existing browser capabilities such as media queries to easily make the experience accommodate the widest range of browsing contexts, including High Contrast Mode. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations for low vision, a condition that affects a not-insignificant amount of the population. Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |