CSS3: Common problems and best practices
35
© 2013 KMS Technology
Transcript of CSS3: Common problems and best practices
© 2013 KMS Technology
CSS3: COMMON PROBLEMS AND BEST
PRACTICES
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 4
TARGET AUDIENCES
• Web developers, web designers• Required: Know 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
HOW TO LAYOUT A WEBPAGE
Confidential 7
HOW TO LAYOUT A WEBPAGE
First is horizontal, second is vertical
TOP NEW FEATURES IN CSS 3
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 10
BORDER-RADIUS
.my-css { border-radius: 10px; }
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 12
BOX-SHADOW
.my-css {box-shadow: 10px 10px 5px #888; }
Confidential 13
TEXT-SHADOW
.my-css {text-shadow: 2px 2px 2px #000; }
Confidential 14
BACKGROUND-SIZE
.my-css {background-size: 300px 400px; }
Confidential 15
MULTIPLE BACKGROUND
.my-css {background-image: url(../images/ball.png), url(../images/grass.jpg); }
Confidential 16
OPACITY
.my-css {opacity: 0.4; }
Confidential 17
WEB FONTS
@font-face { font-family: "Harry Potter"; src: url(../font/harrypotter.ttf);}
BEST PRACTICES
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
THE SOLUTION FOR COMMON PROBLEMS
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
NOT CONSISTENT BETWEEN IE, FIREFOX, CHROME…
Confidential 29
NOT CONSISTENT BETWEEN IE, FIREFOX,
CHROME…• Do not let your css use default
Chrome FireFox IE
HOW TO CREATE YOUR CSS ON SYSTEM CSS
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; }
HOW TO RESIZE THE PICTURE BY CSS
Confidential 33
HOW TO RESIZE THE PICTURE BY CSS
.my-css {background-size: 300px 400px; }
ANY QUESTIONS ?
© 2013 KMS Technology
THANK YOU !
