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.
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.
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.
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.
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?
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.
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.
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.
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.
Both modes will look the same, actually:
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.
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.
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.
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!
Marin Bratanov is a Principal Technical Support Engineer in the Blazor division, after starting out in WebForms and going through Kendo UI. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and Facebook.
Subscribe to be the first to get our expert-written articles and tutorials for developers!