CSS Support Improvements in ReSharper 8

Dmitri Nesteruk

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…

as well as class references

and also element references:

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:

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:

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:

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…

…as well as inspections

… and even the Rename refactoring on a keyframe identifier:

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!

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!