Articles Tagged css testing

It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka “boss man”) Mundi Morgado.

It went something like this…

Mundi Morgado I want you to build a visual screen reader.

Nathan Smith Who what now?

Mundi Morgado I want a CSS library that allows you to see the structure of a document. It shouldn’t use class so that you’re forced to focus on semantics. Also, … Read article “Introducing Construct.css”

In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017.

A friend of mine, Justin Slack from New Media Labs, recently sent me a link to the phenomenal Feature Query Manager extension (available for both Chrome and Firefox), by Nigerian developer Ire Aderinokun. This seemed to be a perfect addition to my workshop material on the subject.

However, upon returning to the material, I … Read article “Using Feature Detection to Write CSS with Cross-Browser Support”

The following is a guest post by Garris Shipon. We’ve touched on the four types of CSS testing here before. Regression testing is the hardest. It’s the type where you’re trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he’ll walk you through … Read article “Automating CSS Regression Testing”

The following is a guest post by Jon Bellah, a Lead Front End Engineer at 10up. Jon reached out to us about writing on the idea of visual regression testing, which is a form of CSS testing (i.e. making sure you don’t screw up your site by accident). I thought the use-case was particularly interesting: re-architecting CSS (converting to Sass, splitting up files, etc) and making sure there wasn’t regressions during that process. Here Jon will go into … Read article “Visual Regression Testing with PhantomCSS”

The following is a guest post by David Racodon. David contributes to this open source code quality tool he’ll tell you all about. I hadn’t heard of it until now, but I know there are lots of folks out there interested in tooling to help keep their CSS in check. This is a bit like CSS lint but formalized into an interface that handles code quality for a whole project.… Read article “An Intro to CSS Testing with SonarQube”

Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.… Read article “Automatic CSS Testing”