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!
Subscribe to Blog updates
Thanks, we've got you!
Eager, Lazy and Explicit Loading with Entity Framework Core
Entity Framework Core (EF Core) supports a number of ways to load related data. There’s eager loading, lazy loading, and explicit loading. Each of these approaches have their own advantages and drawbacks. In this post, let’s have a quick look at each of these ways to load data for navigational prope…
OSS Power-Ups: bUnit – Webinar Recording
The recording of our webinar, OSS Power-Ups: bUnit, with Egil Hansen and Steven Giesel, is available. This was the twelfth episode of our OSS Power-Ups series, where we put a spotlight on open-source .NET projects. Subscribe to our community newsletter to receive notifications about future webi…
Accelerating Your Testing Workflow with Unit Test Creation and Navigation
Unit tests play an important role in our daily development workflow. They help us ensure our codebase's correctness when writing new functionality or performing refactorings to improve readability and maintainability. In the process, we often create new test files that accompany the p…
Introducing Predictive Debugging: A Game-Changing Look into the Future
With the introduction of debugging tools, software developers were empowered to interactively investigate the control flow of software programs to find bugs in live environments. At JetBrains, we've always strived to improve the art of debugging. Besides the more standard things you expect from a de…