Normalize CSS

2 posts, 0 answers
  1. Rob
    Rob avatar
    3 posts
    Member since:
    Jan 2015

    Posted 31 Jul 2015 Link to this post

    I've been an on/off web developer for 15 years so don't class myself as an expert. I've used NetAdvantage in the past (and suffered!) but now I'm running my own business, I've looked at lots of 3rd party controls and Telerik scores highly so here I am starting, almost, from scratch.

    I'm quite aware of the zillions of browser compatibility problems with different browsers, CSS etc etc.

    The new application I'm writing is bespoke and will only be used in a specific industry and therefore it is possible to require that they use a modern browser and build using the latest cleaner HTML and CSS. This will hopefully reduce the number of weird layout issues that plague web applications.

    In order to "get this right" this time, I've been doing a lot of reading up on CSS layouts so I really do understand this key aspect to web application design. This has brought me to this CSS stylesheet:

    The idea is to get the browser into a much more consistent known state.

    Is this going to cause any problems with UI for ASP.NET?

    Kind of associated with that question is that will switching to box-sizing: border across all tags using * { box-sizing: border } cause layout problems in Telerik if it's assuming the normal width/height sizing model?

    So may questions! It's a big mountain that I'm staring up ;-)

    Cheers, Rob.


  2. Slav
    Slav avatar
    1359 posts

    Posted 05 Aug 2015 Link to this post

    Hi Rob,

    Most of the controls in the UI for ASP.NET AJAX suite use HTML elements in their rendering and the appearance of these elements depends on built-in styles.

    The clearing of styles usually uses global CSS rules, such as the one you mentioned (* { box-sizing: border }), which could change the styles of the elements the controls use and expect, resulting in broken appearance. The overriding of the box-sizing CSS property in particular will surely cause a lot of glitches in the skins.

    Note that this is valid not only for the Telerik controls, but for all components based on HTML elements that use CSS stylization and a global style overrides it.

    The possible solution is to try such normalization and when you find a broken Telerik control, to modify its styles by creating a stronger selector that will have more weight than the global style. Nevertheless, this will require extensive knowledge of CSS, it will most probably take a great effort and any customizations you make to the style sheets of the controls will not be supported.

    The other possibility I can think of is to create a layout that is specific to your project and uses CSS selectors that target particular HTML elements. This should remove the risk of affecting the built-in skins of the Telerik controls. 

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top