5 CSS tools that will facilitate your web developer work
Let’s face it, most of us are in a love/hate relationship with CSS. While you can achieve an amazing appearance with it, dealing with malfunctioning visuals, cross-browser compatibility and the syntax of features you may almost never use can all be frustrating parts of the process of developing your project.
Hoping to somewhat help my fellow developers, here are 5 CSS tools that will facilitate your web developer work:
1 — Debug CSS Chrome Extension — https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj
One of the tools I use the most. Install this Chrome Extension and with one click you can see the outline of all elements on the screen. This is especially great when you need to see how each element is placed on the screen, what is inside what, which elements are overflowing or causing weird spacing, among many other uses.
A plus is that you can hold the “control” key and hover an element and see some of its properties!
2 — caniuse — Checking for browser compatibility — https://caniuse.com/
Probably the most famous on this list, caniuse is a great website that lets you check browser compatibility across a range of CSS properties.
Not sure if Internet Explorer 11 will handle that fancy CSS feature (very likely, it does not even handle grid properly…)? Check here in seconds (and maybe conclude that supporting IE might not be worthy for this project anyway…)
3 — shouldiprefix — Knowing when to add CSS prefixes — http://shouldiprefix.com/
So, you came to the conclusion that you are going forward with that fancy CSS feature but freaking Safari or Firefox are not working in the same way as Chrome and Edge? This could be a prefix issue, so shouldiprefix will tell you whether to add it and which prefixes, and maybe along the way you will get to know some of the fanciest CSS features added in recent years (did you know it is possible to cover part of an element with a “mask” property? I might have to try that now…).
Beware, it was last updated last year, so it should mostly be an indicator of whether you should try prefixing that feature.
4 — CSS Gradient Gradient Generator— https://cssgradient.io/
Gradients can be amazing ways to change the appearance of elements (though designers seem to consider them cool and then uncool every 2 years), but it might not be clear which direction, colors and amount of each color will best fit the gradient in your project? This is the tool that will easily let you try out different combinations and give you the full CSS code, speeding up the whole process (and if you are like me and does not always understand aesthetics well, it may also reduce your pain).
5 — Clippy — Clip-path generator — https://bennettfeely.com/clippy/
Clip-path is one of these CSS features that have great looking results (beware the low browser compatibility) but you probably will have not many use cases depending on what you mainly work on, so writing the path values you desire might not be something you can instantly do without a few tries. This is the tool that will speed up the process for you, letting you try different shapes (presets or custom) and it will give you the whole code back (precious minutes experimenting might be saved here).
The world of CSS has a lot more to it and many hidden features. In coming articles, I hope to bring more content that can hopefully make our daily work easier! Stay tuned.
