The advanced features of CSS3 and HTML5 by OPTIPLEX WORLD

CSS3 AND HTML5 LATEST ADVANCE FEATURES bY OPTIPLEX WORLD

 In thse discussion you can find lots of new things about Css3 And Hml
Next question: What can be done with CSS3 and HTML5that could not be done before?

So, there is 2 parts to this. The stuff that is madeeasier, such as gradients, rounded corners, opacity and custom fonts and thestuff that we couldn't do before. most of it we could, but with hacks,scripting and Flash. I think the most interesting parts are as follows: 1.optimizing layouts, media queries, viewport. This is essential for the web oftoday, because we now have so many different browsing devices, with differentscreensizes, etc.

MQs are essential if you want your layout to adjust totill look good for different screensizes and viewport basically fixes a mobilehack. the idea being that most web pages look pretty crap when you render themwith browser widths of say 320/240 px so most mobiles pretend the viewportwidth is 800 odd pixels (Op Mobile uses 850px), renders the page like that, andthen shrinks the result to fit inside the screen. So mobile devices lie abouthow big a pixel is ;-). You can see why this mobile hack is used, but it reallydoesn't work in situations where you have a column of content say 500px wide inthe center of the screen

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
gives a nice introduction

With a 500px centered content, the mobile browser willrender it with a load of space on each side of the column and show the columnreally tiny in the center of the screen. Whereas you'll agree i'm sure that itwould be better to use the entire viewport width on mobile devices. Withviewport you can say "when a mobile browser renders this device, don't renderit assuming 850px, render it using 500 instead!" So you can tell mobilebrowsers how to display your site. Anyway, read the article to find out more

chrisdavidmil: well, it's always solution to check fordevice-width. not viewport width

yup, but that still doesn't fix the problem in thecase of the default mobile rendering, in some cases. you can use both togetherpretty effectively (MQ + viewport)

2. behaviour in CSS, eg animation/show hide is my nextfavourite. we could do animation using JS/Flash and in many cases, Flash isstill the best tool, eg for long cartoons, but being able to do smallanimations for responsive UIs using just CSS is really awesome

using transitions and transforms, animation, and the:target pseudo class

3. offline apps are a really major new feature ofHTML5

chrisdavidmil: I agree, it's powerful, but I got problems withunrevealing whole text places in box with limited height. I've setheight:100px; overflow: hidden; and changed it to height:auto; for :target.however in such case (100px -> auto) Opera didn't animate change of height.do you know what do standards say about such a case? s/unrevealing/revealing/

There are some things that won't work with target

I remember this one coming up before

well, i think it is not target-depended, it probably alsofailes on :hover, etc. I guess it's about 100px->auto change

I usually tend to absolutely position my different"Tabs" so they all sit on top of one another, set the opacity to 0, and thenset it to go to opacity: 1 on target

yeah, opacity could be kind of workaround... but try toexplain that to the client

I think it's because you are trying to go from a unitvalue to NOT a unit value

if you say did it from 10% to 100%? this could have asimilar effect, depending on your context

chrisdavidmil: that's right, I just wonder if this is OKaccording to standards, or bug in Opera. changing 100px to 200px worked fine.will try with %

or what about using positioning?

Zajec: I think I worked around that with setting min-height

you could position it outside the visible area and setoverflow:hidden; on it, and then transition the position to slide it into view?not tried it, but it just popped it into my head ;-)

Zajec: max-height even

Zajec: Example: http://oex.r3m.co/api/test.html

chrisdavidmil: do you know sth about radial gradients? itseems Opera does not support them

Radial gradients - we are supposed to have those soon.The core team is working on them. But I can't say exactly when we might getthem inplemented in the release version of O

Next question: How are CSS3 and HTML5 different fromCSS 2.1 and HTML 4.01?

the general premise of the new specs is to be: 1.backwards compatible with what came before, 2. Allowing standardised, easierways to do things that we currently already do, but using hacks or plugins, 3.cutting down on time and effort, and usage of Photoshop and JS

Examples:

HTML5 form controls like date pickers and sliders fallback to normal text inputs in browsers that don't support them, so at least theuser can still enter something.

When you want to implement expandable rounded cornerson a block of content with CSS2 you need to wrap the block in 3 empty, and then attach a different background image to each one which isa nightmare to maintain. What if your boss wants you to show him 22 differentcolour scheme variations of that content box? That's a lot of Photoshop workfor you ;-) Or you can just go: div { box-shadow: black 5px 5px 10px;} or whatever

Also cutting down on usage of plugins is a big one.Flash content can't be manipulated using web standards. Having to download theFlash player to view some content can break the user experience, and it is notvery accessible out of the box. Whereas HTML5 is much more so, in terms ofthings like keyboard a11y

yep and most cell phones are left out

yup - iPhone/iPad doesn't support Flash either ;-)

i have to write like 2 different sets of code ... will itend soon ?

you're talking about the vendor prefixes, ofcourse?

This will continue for a while. but it is essentiallya good thing. if it weren't for prefixes, browsers would then potentiallyimplement CSS features in different ways, and there would be nothing you coulddo about it. the prefixes last until all the browser vendors agree that thespec is finalised enough to drop them. a recent example is CSs gradients. infact, Safari still uses the broken crappy Webkit version of the syntax.although Chrome/O/FF use the right stuff

chrisdavidmil: should we see prefixes for gradient droppedsoon?

chrisdavidmil: Webkit was changed to new syntax, so probablynew Safari should use new Webkit and new sytnax

I think we'll see prefixes drop very soon for a numberof CSS3 things. linear gradients, 2D transforms, box-shadow for all of thebrowsers that still use the prefix, they are all getting fairly stable now. ButI couldn't say when exactly

When do you guys decide to start dropping prefixes. Dodifferent browser vendors convene to discuss this stuff?

Yes - the CSS working groups decide. One interestingpoint is that vendor prefixes were only ever supposed to be for browsertesting. The W3C recommends that developers never use them. Shows how much theyknow ;-)

chrisdavidmil: anything you can say about history support inOpera?

History support. I think we will have this very soon.I did see discussion of it recently. I think we should get it into a pointrelease fairly soon. So a few months, as a rough guess