Skip to main content

Posts

Showing posts with the label CSS3

Navigating WCAG 2.1: A Step-by-Step Approach for Developers

 Get Familiar with WCAG 2.1: WCAG 2.1 is like the rulebook for web accessibility. It's split into four parts: Perceivable, Operable, Understandable, and Robust (POUR). For instance, "Perceivable" includes rules like giving all images a text description (alt text) for folks who can't see them.  Run an Accessibility Audit: Use tools like Google Lighthouse or WAVE to scan your site. They'll flag up stuff like missing alt text, low color contrast, or form fields without labels.  Manual Testing: Automated tools can't catch everything. You'll need up roll to your sleeves and do some manual testing. Try navigating your site using only your keyboard, or using a screen reader like NVDA or VoiceOver. You're checking that all content and functionality is accessible.   Write an Accessibility Statement: This is a page on your site where you talk about your commitment to accessibility. You could mention that you're aiming for WCAG 2.1 Level AA compliance, lis...
Post a Comment
Read more

Define variable in CSS like Less and Saas

If you're front-end developer than you must be knowing the little struggle of implementing preprocessors like Saas and Less. This technologies helps you in adding second layer on top of your css layer. Most useful concepts in implementing the second layer are defining reusable global variables that we can reuse again. Good to know that now, CSS variables are now here and it will allow you to do a few things that you couldn't even do with preprocessors! In CSS now you can define :root { --main-bg: #dddddd; } body { background: var(--main-bg); } .container{ background: var(--main-bg); } You need to wrap variable under var() function. You can do inheritance .container { --type-font: Gotham; } .wrapper, .container { font-family: var(--type-font); } Even it allw you to specify multiple levels of fallbacks .container { font-family: var(--type-family, Arial); } Variable can be accessed and value can be changed via javascrpit var b...
Post a Comment
Read more

OVERIVEW OF MEDIA QUERIES

Overivew of Media Queries Media Queries are web modern way method lets say logical expression in css by which responsive page which can be work on any device can be created. We can set different target points/ media expressions for document. When user changes the resolution or user opens up same page in different devices if it is satifying the expression defined or lets say if its matching the breakpoint defined in media queris. Web page will automaticaly excute and apply all css defined in that media queries. There are different ways of doing it //External: //While Importing: @import "style.css" only screen and (max-width: 340px); //Within CSS: Here's a simple example of the media query for standard devices. How min and max width and other queries work //max-width: If device width is less than or equal to 600px, then will execute @media only screen and (max-width: 600px) {...} //min-width: If device width is greater than or equal to 600p...
Post a Comment
Read more