CSS 3, τι καινούργιο;

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS 3, τι καινούργιο;

Δημοσίευση από dimsis » 09 Ιουν 2010 11:17

Να και άλλη μια λύση (script hack με .htc) για υποστήριξη CSS3 από IE6,7,8 :
http://aext.net/2010/04/css3-ie-support/

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από korgr » 09 Ιουν 2010 11:55

dimsis έγραψε:Να και άλλη μια λύση (script hack με .htc) για υποστήριξη CSS3 από IE6,7,8 :
http://aext.net/2010/04/css3-ie-support/
Δεν με διαβαζεις προσεκτικα Δημητρη, δεν με διαβαζεις τσ τσ τσ :P
Καλημερα στην ομορφη Αλεξανδρουπολη :D

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS 3, τι καινούργιο;

Δημοσίευση από dimsis » 09 Ιουν 2010 12:16

Καλημέρααααααα :) τι έχασα; Συμπληρωματική εναλλακτική πρόταση πάνω στο δικό σου προηγούμενο post είναι και το link που έδωσα, αν αυτό εννοείς.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

CSS 3, τι καινούργιο;

Δημοσίευση από korgr » 09 Ιουν 2010 13:45

Τιποτα μωρε πλακα κανω, απλα στο αρθρο που παρεθεσα υπαρχει και η ie αντιμετωπιση:
Rounded Corners in IE

None of the IEs support border-radius, not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius.
Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.
Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.
First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:
.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}
The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.
That’s why it’s a good idea to avoid relative paths like we did above.
Hoops you have to jump through for IE:
Any element with this hack needs to have position, so unless it already has a position, attach position: relative.
It can act funny on some elements that are natively inline, even if you attach display: block, although not all the time (fun!).
It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.
You can only use this on elements with the same border radius applied to all their corners.
When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
Don’t even think about combining this with another IE hack, such as a box-shadow filter hack.
Additionally, if you try to use this hack dynamically with CSS or Javascript effects, it will give you problems if the element either doesn’t exist or has display: none or visibility: hidden (basically if it isn’t rendered on the page). With JS, you can apply the behavior: url(/css/border-radius.htc) via Javascript after you append the element to the page. When using a CSS effect like :hover, you’ll have to find a more creative way of hiding the content, such as overflow: hidden or z-index: -1; hiding an element like this will still cause the browser to render it, even if it isn’t visible to the user.
Unfortunately there are still certain drawbacks to using this hack with dynamic content, for instance there’s a flicker when changing the background color of an element with Javascript, and I haven’t found a way to change it at all using CSS’s :hover.
Another IE option:
You might also think about trying this method, although it seems more complicated to me.
Update – IE9
A few weeks ago at MIX10, Microsoft announced IE9, and it seems like they may have finally gotten a few things right. Of particular interest is IE9’s support of CSS rounded corners, which actually surpasses the support of all other browsers. See here.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες