Update:
This page was created a while ago. Since then I have done an updated version of this presentation that I presented on barcamp brighton 4.
Below I embedded the slides of the updated presentation from slideshare:
What is this about?
- Quick overview of what can be done in latest nightly builds and browser betas
- Focusing on CSS
- not complete..
Internet Explorer 6 features adopted by new browsers
word-wrap
word-wrap: break-word;
CSS3, supported in IE, Safari and Firefox 3.1 (Alpha)
word-wrap specWhat can be done now (if you don't support IE6)
Internet Explorer 7
- Min/max width/height support
- Fixed positioning support
- Child selectors (div > p)
- Adjacent selectors (h1 + p)
- Attribute selectors (h1[class=firstH1])
- :first-child pseudo-class (p:first-child)
- :first-letter pseudo-class (p:first-letter)
- :first-line pseudo-class (p:first-line)
- Alpha channel PNG support (!)
Internet Explorer 8 (beta2)
- generated content (:before and :after)
- :focus
- :lang
box-sizing
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200px;
border: 10px solid #333;
padding: 1em;
CSS3, supported in Safari, Opera and Firefox 3
box-sizing specoutline
border: 3px solid green;
outline-offset: .5em;
outline: 3px solid #000;
padding: .5em;
CSS3, supported in Safari, Opera and Firefox 3
outline specWhat can be done in WebKit, Firefox 3.1 (and Opera 9.5)
Text shadow
text-shadow: 1px 1px 1px #333;
CSS3, supported in Safari, Opera, iCab and Firefox 3.1 (Alpha)
text shadow specBox shadow (not Opera)
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
CSS3, supported in Safari and Firefox 3.1 (Alpha)
box shadow specBorder image (not Opera)
-moz-border-image: url('images/border.png') 27 27 27 27 round round;
-webkit-border-image: url('images/border.png') 27 27 27 27 round round;
border-image: url(border.png) 27 27 27 27 round round;
padding: 15px 15px 15px 15px;
border: double orange 1em;
CSS3, supported in Safari, and Firefox 3
border shadow specBorder radius (not Opera)
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
border: 1px solid #000;
padding: 10px;
CSS3, supported in Safari, and Firefox 3
border-radius specMulti-column layout (not Opera)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-moz-column-count: 4;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #333;
-webkit-column-count: 4;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #333;
CSS3, supported in Safari, and Firefox 3
multi column specMedia Queries
@media all and (max-width: 640px) {
.media-query { background-color: #c00; }
}
background-origin / background-clip
-webkit-background-origin: content;
-webkit-background-clip: content;
-moz-background-origin: content;
-moz-background-clip: content;
CSS3, supported in Safari, and Firefox 3
background-origin specbackground-clip spec
-webkit namespace
resize
resize: both;
overflow: auto;
CSS3, supported in Safari
resize specFont embedding
@font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Regular.otf);
}
.font-face {
font-family: Kaffeesatz;
font-size: 3em;
}
font: Yanone Kaffeesatz
CSS2, supported in Safari (and with proprietary Embedded Open Type in IE)
font-face specTransitions
.transition {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
.transition:hover {
opacity: 0;
}
supported in Safari
transitions on webkit.org
example on cssPlay
menu example on shauninman.com
another example on shauninman.com
Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#247DCF), to(#fff), color-stop(0.9, #fff));
-webkit-background-origin: padding; -webkit-background-clip: content;
supported in Safari
gradients on webkit.orgReflections
border: 1px solid white;
-webkit-box-reflect:below 1px
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.5, transparent), to(white));
margin-bottom: 200px;
supported in Safari
reflections on webkit.orgMasks
-webkit-mask-box-image: url(images/mask.png) 75 stretch;
supported in Safari
CSS masks on webkit.orgMultiple background images
background: url(images/generator5.jpg) top -300px no-repeat,
url(images/generator5.jpg) top right no-repeat,
url(images/generator5.jpg) bottom right no-repeat,
url(images/generator5.jpg) left repeat-y;
multiple backgrounds spec
background-size (Opera as well)
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
background-size spec
What do you think?
- Which browsers should we still support?
- Will IE continue to have such a large market share?
- iPhone, google chrome?
- Will there be new browser wars?