For a while now I’ve been telling people that I want Polypane to be prescriptive, not descriptive. In this article I want to expand on that and explain what I mean when I say “prescriptive”. I usually explain it like this: there is no shortage of tooling that will tell you everything you do wrong when…
New online tools: CSS specificity calculator and color contrast checker
My goal with Polypane is improving the workflow for developers and designers. The main focus is of course developing an excellent browser for developers and designers, but I’m also developing online tools that help out during development. Two of them online now are a CSS specificity calculator, and a color contrast checker. Both of them go way beyond what you expect from these types of tools.
CSS Specificity calculator
CSS specificity can be tricky to understand and while there are many places online that explain it, figuring out the specificity of a CSS selector can be difficult.
There are online tools that tell you the specificity, but none that also explain how that specificity is calculated. For example, is an attribute selector as specific as an element or a class? (It’s as specific as a class:)
Color contrast checker
When working on a site in Polypane, the contrast checker informed me I didn’t have enough contrast on a text element, but it didn’t tell me how I could find a color that did have enough contrast, or better yet, told me which color that was.
So I decided to implement improvement suggestions in the next version of Polypane. Any color with insufficient contrast will get a suggestion if we can calculate that, based on the required contrast ratio for that specific font-size:
After building that, I decided to create an online tool that did the same. Most online contrast checkers are either fast but only give you the current ratio, or slow and then suggest colors. Many of them also don’t take into account the alpha of a color leading to incorrect ratios.
I think tools should be fast, correct and helpful, so I set out to make a tool that updates on the fly, correctly handles transparencies and also gives you alternative colors if your contrast ratio is not enough.
For both tools, I made sure that their status is included in the URL, so you can share them. They are available for free on the Polypane website, alongside the Responsive design glossary that I wrote. Let me know if you enjoy using these, and if you have suggestions for new tools to build!
Modern design tools, of both the vector and code kind, are amazing pieces of software that in recent years have transformed the design profession, but none of them seem to really understand the context that we currently design for. The remnants of fixed-dimensions are still visible in all and the tools are not helping us…
Polypane is out today! Polypane is a browser for developers, designers and everyone else that creates websites and webapps. This release has been a long time in the making, and has taken a lot of hard work in the past months to get this release out the door. I am incredibly proud of the app…