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.

Code Completion

ReSharper 8 offers pervasive code completion for various CSS constructs not just in CSS, bot also both in C# (e.g., when used in a view engine) and in JavaScript. It is supported for known CSS attributes

CSS attribute completion in C#

CSS attribute completion in JavaScript

as well as class references

CSS class completion in C#

C# class completion in JavaScript

and also element references:

CSS element completion in C#

CSS element completion in JavaScript

Many other common document functions include appropriate code completion lists with appropriate references. These include getElementsByTagName(), add/removeEventListener() and init/attach/detach/fireEvent().

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:

CSS live templates

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:

CSS live template pick units of measure

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:

CSS context action settings

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:

CSS inspection settings

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:

CSS version inspection highlighting

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:

CSS switch validator context action

Color Conversions

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 rgb() or hsl(). ReSharper now offers context actions for quick automatic conversions between all of these notations for all the color definitions it finds:

CSS color conversion context actions

Naturally the option to convert color to named form is only available for color definitions which match a named color exactly.

Keyframe Support

ReSharper supports the @keyframe directive. This support includes code completion…

CSS keyframe identifier completion

…as well as inspections

CSS keyframe inspection

… and even the Rename refactoring on a keyframe identifier:

CSS keyframe rename refactoring

Oh, and in addition to @keyframe, ReSharper also supports the @view-port and @page directives.

Conclusion

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!

This entry was posted in ReSharper Tips&Tricks and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">