RadControls for ASP.NET AJAX Lightweight Rendering – Going deeper into HTML semantics and CSS3

Well, 2013 is here, the End of the World was postponed and we are still in the game! The Last year was important for us as we took the decision to provide Lightweight Rendering for some of the Telerik's ASP.NET controls.

This post is going to be a long one, so grab a cup of coffee and sit comfortably, because we are going to start with some history first.

Modern Browsers Era is here

What does “Lightweight Rendering” mean really? Based on statistics, more and more people are using the so called “modern browsers”, which have good enough implementations of HTML5 and CSS3. While in the past it was really important for the controls to be compatible with all browsers, we have reached a moment when specifically targeting older, CSS3 non-friendly browsers, obstructs the further development of the suite. We already have some controls strongly based on HTML5 – our HTML5 Chart and Gauge and we feel it is time to take more advantage of CSS3.

Should we go to CSS3?

Well, it is clear that CSS3 is a huge step forward, which should be carefully considered, as this is a whole new universe that should be researched first. Let’s start with some background.

We have been asked quite often why we are not using more CSS3 to style our controls. The most common questions have been about rounded corners, shadows or increasing the height of a specific HTML element while keeping its gradient.

How it used to be

Using old school methods, there are several ways to achieve rounded corners, and the one that we are using for controls, such as Window, ToolTip and Dock, uses a table with three rows and with three cells in each row. The top and bottom corner cells are used to simulate the rounded corners by using background images.

Adding shadows makes things even more complicated. An option to enable/disable rounded corners and shadows brings us larger sprites, harder for customization and tons of additional HTML/CSS/JavaScript to override the different control states.

CSS3 vs. ancient methods

And talking about CSS3 vs. old way – it is a great time saver. Just think how you could achieve rounded corners and shadows for a single block element:

That’s it – two lines of CSS3. You can’t even break sweat with this.

The old way requires tons of extra HTML and CSS and a complicated sprite image in addition (actually, several sprites). And what if we have several themes? More sprites need to be created and maintained.

Then, in the end, the customer asks us for a “small change” – to make the rounded corners bigger and the shadows a little lighter and bigger for instance…You can imagine how much time it will cost using the above CSS3 example vs. reworking all sprites, right?

But wait – that is not all - another great benefit CSS3 brings is the opportunity to combine it with semantically structured HTML. The resulting code is less, lighter, faster, it is SEO friendly, it is nice and it is modern. What more could you ask for?

Telerik Controls and Lightweight Rendering

What we have already

There is a popup control that uses the Lightweight Rendering principles - Notification has a semantically structured HTML and uses CSS3 to achieve rounded corners and shadows. It was our first attempt at doing things the modern way only and we were anxiously waiting for feedback. So far it seems it is being accepted nicely.

Since it was released we have introduced several new skins and it was really easy to create them for this control, especially when compared to similar non CSS3 and non-semantically structured controls like RadWindow. This is yet another reason why we (and you) should like it.

Other controls and current plans

Of course, not every control needs to have a Lightweight Version – ones like Social Share and TagCloud have quite a simple rendering, which is “lightweight enough” already.

Currently, the only control that can be switched to a lightweight version is our ASP.NET ComboBox.  We intend for RadDock, RadWindow, RadToolTip, and RadFormDecorator to follow.

Switching modes

Choosing the control’s rendering is easy, just use the RenderMode property and set it to Lightweight. This will enable the Lightweight Rendering which will provide the modern HTML/CSS, while the original one will be the default.

The actual difference in terms of code

Finally, code! I know I have been keeping you long enough :-) Go through the below snippet to see the upcoming RadDock lightweight rendering, that we intend to introduce with the Q2 2013 release.

RenderMode: Classic

RenderMode: Lightweight

Both modes will look the same, actually:

Creating a custom skin for the lightweight dock

The Creating RadDock Custom Skin help article explains in detail how to create a custom skin for the Classic rendering:
It is necessary to use software such as Adobe Photoshop to edit the sprite in order to have different colors.
If you want a bigger header, you will need to remove the existing sprite form the top header cells, to increase their height with CSS and to create a new sprite that will be used instead.

Even if you have not had to do this yourself you can see it requires a mixed set of skills and will take some time.

Now, if I wanted a different colour with the lightweight rendering I would use the following CSS. It took about five minutes, without any preparation:

And this is the result:

We have tried to use CSS for all parts where it could be used. This will allow developers to easily customize the controls without having to create custom skins or edit a lot of sprites. This will untie your hands to achieve really impressive visual results, to be flexible and to focus your development on the semantics and content instead of making pixel perfect sprites.

Well, it is not that sprites can be avoided entirely, of course, but only one will be used for that control which is already a massive improvement.

One Sprite to rule them all

We are planning to have a single common sprite that will be used in all controls to visualize arrows, close buttons, reload buttons etc. that are common for most of the controls.  It is obvious that one common sprite can be maintained much easier than a sprite per control. Actually this is not part of the CSS3 improvements, but it is part of the lightweight rendering.

There will still be some controls with specific sprites, but we will try to create three common sprites per skin that will rule - respectively – actions, buttons, and toggle states.

Pros and Cons

Actually, the benefits are really endless and, in all honesty, I could not point them all out. I have been talking about them for a while now, so I hope you get the idea. This is the future and we have to step forward into it. I promise it will be fun :-)

The only drawback I can think of is the lack of rounded corners and shadows in ancient browsers like IE7 and IE8. This will not break the controls’ layout or decrease their performance, however. On the contrary – even older browsers will benefit from the faster, lighter rendering and semantically structured HTML.

Let us know what you think of this path

We are only scratching the surface of the CSS3 universe. Do you like what you’ve seen so far? Do you want to see more improvements in this area? Perhaps you have some best practices that you’d like to share with us and to see them power the ASP.NET AJAX suite? Just let us know by leaving a comment or posting a ticket!