Machine learning For frontend developers
source link: https://www.tuicool.com/articles/MFFrMnm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
:bulb: Tip of the Week
supported by 
Using CSS to highlight images with no alt tags
If you're preparing a site for production it can be a good idea to have images call attention to themselves if they're lacking an alt attribute. This is a simple enough thing to do and is a helpful, visual way to check that your site is accessible .
To do this you'll need to make use of the CSS negation pseudo class :not() . This accepts a selector, such as alt , as an argument to check against.
The :not() selector will check if an image has an alt attribute specified, and if not, will trigger. The example below will turn any image lacking alternate text to grayscale.
img:not([alt]) {
filter: grayscale(100%);
}
The filter: property has a variety of functions , so you can experiment with how 'obvious' you want the images lacking an alt tag to be. Another solution may just be using the tried and tested red border or you could use display: none to hide a non-compliant image entirely! :wink:
Ire Aderinokun runs through a similar technique here for highlighting broken images.
This Tip of the Week is sponsoredPantheon, the WebOps platform built for agility. Learn how you can empower your web team and drive results on your website with WebOps.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK