Hey there!
You're from IT ?
So you've came at the right blog!
We have some new features in chrome -
Sometimes CSS debugging is very tough for developers. We don't even know how many unused CSS we write and incorrect syntax etc.
Let's see what new features chrome is providing us -
So here Chrome is giving us some new features that will relax us with tricky CSS. By using these features, we will can get an overview of our website like - about fonts, colors, number of unused declarations, number of media queries, etc.
- Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
- Head over to DevTool Settings (? or Function+F1 on Mac; ? or F1 on Windows)
- Click open the Experiments section
- Enable the CSS Overview option
Have a look at this! We get a different CSS overview tab in devtools menu, when we close Settings. You have to make sure that it's not hidden in overflow menu.
Also notice that the your report is divided in some sections which should include colors, fonts, unused declaration and some media queries. Now that's a quite a lot of info available very easily in a little space just served for you.
Now if you pay attention you would notice that this helps us not only as front enders but also as designers. As a web designer can sort this and start checking our work to make sure that from head to toe or from color palette to the font stack everything is cleared/ sorted.
Top comments (0)