As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
17. Made it easier to target different browsers Supported global variables Made it easier to do DRY CSS Simplified complicated style hierarchies
18. LESS for CSS Use LESS to write less CSS Variables, operations, mix-ins, nested rules lesscss.org LESS is CSS
19. What LESS does NOT do Does not… Add CSS support to browsers Detect CSS support in browsers Save you from writing bad CSS Add runtime overhead*
20. Variables Reusable values Can only be defined once Output CSS LESS @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } #header { color: #6c94be; }
24. Different Ways to Use LESS Dynamic parsing client-side Dynamic parsing server-side ASP.NET Handler Design-time/Building-time parsing Chirpy for VS <link rel="stylesheet/less" href="style.less" type="text/css" /> <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
27. Your Feedback is Important Please fill out a session evaluation form drop it off at the conference registration desk. Thank you! telerikwatch.com @toddanglin anglin@telerik.com
Hinweis der Redaktion
Wrong answers: -developer job security-make designers feel like programmers
Before CSS:Styles were mixed with HTML tags (difficult to update, difficult to read)Layout was defined with HTML tags (poor semantic use of tags)
CSS exists to separate styling and layout decisions from structural meaning of underlying document*Separation of concerns to a degreeCSS rules often tend to create dependencies on HTMLOther benefits of CSS:Performance (caching of CSS rules)Semantic HTML
http://dzineblog.com/2008/07/20-cool-css-zen-garden-designs.htmlCSS Zen Garden – Example of the flexibility CSS provideshttp://www.csszengarden.com
Key offendersSupporting different versionsIE6 is the devilExamples of needed hacks and workaroundshttp://www.webdevout.net/css-hacks
IE6 is the devil – It is the source of many CSS myths, fears, and painful truths.Microsoft is actively trying to help end the IE6 era – goal: less than 1% usage worldwide.
New CSS3 featuresCSS3 principlesShow example of CSS3 in actionhttp://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/2010/WD-css-2010-20101202/#css3
-Show example of browser prefixes in actionhttp://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/Logo from http://lesscss.org/
*Depends on how you deploy LESS – runtime conversions of LESS to CSS can have some impact; build-time conversions do not.