css3: common problems and best practices
TRANSCRIPT
Confidential 3
OBJECTIVES
• How to layout a webpage• Introduce top new features in CSS3• Introduce CSS best practices• Introduce common problems that a
web developer usually encounter when working with CSS
Confidential 5
AGENDA
• How to layout a webpage• Top New Features in CSS 3• Best practices• The solution for common problems• Extended Q&A
Confidential 9
TOP NEW FEATURES IN CSS 3
• Border-radius• Gradient background• Box-shadow• Text-shadow• Background-size• Multiple background• Opacity• Add special font
Confidential 11
GRADIENT BACKGROUND
.my-css {background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}Ex: http://www.colorzilla.com/gradient-editor/
Confidential 15
MULTIPLE BACKGROUND
.my-css {background-image: url(../images/ball.png), url(../images/grass.jpg); }
Confidential 17
WEB FONTS
@font-face { font-family: "Harry Potter"; src: url(../font/harrypotter.ttf);}
Confidential 19
BEST PRACTICES
• Don't use inline style• Should not use id attribute• If possible should be use sprite image• Call html, we don’t need edit on html• Combine Elements• Introduce Twitter Bootstrap (
http://twitter.github.io/bootstrap/)
Confidential 20
DON'T USE INLINE STYLE
<div style=“margin-left: 25px”> bayer munich </div>
<div class=“name”>bayer munich </div>
Confidential 21
SHOULD NOT USE ID ATTRIBUTE
<div id=“name”> Real madrid</div>
<div class=“name”> Real madrid </div>
Confidential 22
IF POSSIBLE SHOULD BE USE SPRITE IMAGE
If they are same size:
.my-css{width:20px;height:20px;background:url(img_nav.gif) 60px 20px;}
Confidential 23
CALL HTML, WE DON’T NEED EDIT ON HTML
<body> <div>Tom</div> <div>Bend</div> <div>Bond</div> <div>David</div></body>
body div:nth-child(4) {Color: red;}
Confidential 24
COMBINE ELEMENTS
.one { width: 840px; }
.two { width: 840px; }
.three { width: 840px; }
.four { width: 840px; }
.one, .two, .three, .four { width: 840px; }
Confidential 25
INTRODUCE TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/base-css.html
Confidential 27
THE SOLUTION FOR COMMON PROBLEMS
• Not consistent between IE, Firefox, Chrome…
• How to create your css on system css• How to resize the picture by css
Confidential 29
NOT CONSISTENT BETWEEN IE, FIREFOX,
CHROME…• Do not let your css use default
Chrome FireFox IE
Confidential 31
HOW TO CREATE YOUR CSS ON SYSTEM CSS
• Use new file css and overwrite system css by “ !important ”
.my-css { color: blue !important; }