CSS Support Improvements in ReSharper 8
In the context of web development, CSS isn’t just something that you encounter in CSS files. CSS, when supported by ReSharper, permeates the structure of your web application, its constructs available in many places where its use is relevant. Here is an overview.
as well as class references
and also element references:
Many other common document functions include appropriate code completion lists with appropriate references. These include
Live Templates in Code Completion
In addition, to make typing property values easier, ReSharper now offers a couple of live templates representing the notation used when defining particular elements. For example, start defining a
width and ReSharper offers the following:
Choosing either length or percentage in the above fires up a live template which makes entering the values easier. For example, if you choose length, you can enter the length value, then pick the units of measure from a list:
Configurable Inspections and Context Actions
Just like other ReSharper-supported languages, CSS how has its own options pages for configuring the applicability and severity of its inspections and context actions:
Browser Compatibility Support
When working with a web project, you can now configure ReSharper to perform various checks on the CSS that’s being used. You can specify the version of CSS to check as well as the set of supported browsers to check against:
Once this is configured, ReSharper will check your CSS against these parameters and issue relevant warnings when necessary. Here’s what you’d see if you set CSS version to 1.0 and used the
* (star) selector:
Also, just in case you’ve made a mistake in the setting and not the CSS itself, ReSharper will help you bump up the setting to one that accepts the element you’re inspecting:
There are plenty of ways of defining color in CSS — a color can be defined by name, using the
#-prefixed hex notation, as well as using
hsl(). ReSharper now offers context actions for quick automatic conversions between all of these notations for all the color definitions it finds:
Naturally the option to convert color to named form is only available for color definitions which match a named color exactly.
ReSharper supports the
@keyframe directive. This support includes code completion…
…as well as inspections
… and even the Rename refactoring on a keyframe identifier:
Oh, and in addition to
@keyframe, ReSharper also supports the
In addition to the aforementioned features, we’ve also improved the general performance of our CSS parser, have updated CSS definitions from w3.org and webplatform.org and have run our analyzer on a large number of popular CSS frameworks with interesting results — a report will be posted in one of our subsequent blog posts.
As always, we hope these new CSS features help make designing web applications a little easier. To see them in action, download ReSharper 8 and let us know what you think!