Add border-radius for IE9 / Opera 10.50

AWESOME! This is great! Thanks for being on top of this :D

Something wrong with the bot? I get why the first one failed (no new line at EOF), but don't know why this would fail.

The non-browser-specific CSS should come first like in the rest of core:

box-shadow: 0 3px 20px #000;
-moz-box-shadow: 0 3px 20px #000;
-webkit-box-shadow: 0 3px 20px #000;

That code in #8 was actually my doing, and I was actually going to submit a patch to change it (with box-shadow being last). The reason being that as these CSS3 properties become more widely supported the correct property will be used.

Err wait, that wasn't my code. Sorry I was referring to something else I had done recently.

Jacine: yeah it is from #535066: Use CSS3 / IE filter to render toolbar shadow.

I think the non-browser-specific CSS should come first, but the most important thing is that it is consistent.

Agreed... :)

I was referring to modules/system/system-behavior.css, and I did actually fix it before it was committed (though I still think they should be in alphabetical order, maybe that is what I was thinking about):

.form-textarea-wrapper textarea {
  margin: 0;
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Shall we do that in this patch or create a separate issue? We should add it to the CSS Coding standards too :)

It should be a separate issue.

I think this patch requires opera 10.50 which hasn't been released for linux yet, so I can't test.

Nice!

I'm not seeing the toolbar dropshadow from #535066: Use CSS3 / IE filter to render toolbar shadow in your screenshot. Does that work in IE9?

We put a lot of work into that issue getting it to work on IE6/7/8 using progid:DXImageTransform.Microsoft.Shadow.

Hopefully IE9 will support box-shadow.

It doesn't look good :(

http://ie.microsoft.com/testdrive/info/ReleaseNotes/Default.html

EDIT: better link - http://msdn.microsoft.com/en-us/ie/ff468705.aspx

I wont hold my breath. LOL.

I think we should move the correct properties underneath the browser-specific extensions and this will be ready.

I created a new issue for the rest: #746768: Determine coding standards for CSS3 properties

Updated patch to consolidate webkit border-radius onto one line also.

Don't want to mark RTBC as I don't have either of these browsers.

#23: Overlay still doesn't work for me - I get the toolbar on the page and in the overlay.

#24: The two issues are independent.

@jbrown Why? It exists both ways in core right now, and if you agree that correct CSS3 property should be last, why not do this one right?

I think the standards based CSS3 property should come first.

The shorthand does not work for -webkit-border-radius in Safari.

Okay - I tested it on Chrome.

So we are back to #12.

Marking RTBC for the patch in #12.

Very nice.

Committed to CVS HEAD. Thanks.

+  border-radius: 7px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 7px;

So out of curiosity, how do we decide that webkit is the one to go with in cases like this where they differ?

I filed a similar patch a few months ago at #655562: Use border-radius throughout core in addition to Mozilla and Webkit-specific properties (which I inexplicably put in the "other" component rather than "markup", which is probably why no one ever saw it) and wasn't sure what to do about that then. I'll go mark that issue fixed now, since I think the patch committed here got all the ones I found, and maybe a couple that I didn't :)

They aren't supposed to be different.

Also note that we now should re-order the properties according to the conclusion found in #746768: Determine coding standards for CSS3 properties

The usual inheritance rules apply. Thus, if we don't intend to inherit any values, then we can use the shorthand properties.

+++ themes/seven/style.css	22 Mar 2010 10:35:36 -0000
@@ -140,23 +140,22 @@
+  border-radius:0 0 10px 10px;

Missing space here.

146 critical left. Go review some!

#39 1) no - see #25 #29

+++ modules/shortcut/shortcut.css	22 Mar 2010 14:18:34 -0000
@@ -79,19 +79,19 @@
   -moz-border-radius-topright: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-top-right-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;

+++ modules/overlay/overlay-parent.css	22 Mar 2010 14:18:34 -0000
@@ -119,18 +119,18 @@
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
+  border-radius: 8px 8px 0 0;

Why not use shorthands for all of these?

+++ themes/seven/style.css	22 Mar 2010 14:18:35 -0000
@@ -140,23 +140,19 @@
+  -webkit-border-top-left-radius: 0 0 10px 10px;

@@ -295,16 +291,15 @@
+  -webkit-border-top-left-radius: 8px 8px 0 0;

Though, those cannot work. ;)

147 critical left. Go review some!

I think we should wait for #746768: Determine coding standards for CSS3 properties to be resolved and then have a new issue for a global patch to apply the standard that is determined.

@David_Rothstein: it looks kinda funky with 10px on chrome (win) whereas it doesn't look funky with 7px on FF (win), so I'd go with 7

Tested #46 and looks fine, except in IE9, but I don't think that is important now.

Oops...I didn't notice first. Sorry... It's good that I attached screenshots, so you could spot it.

Patch in #46 needs work for the -webkit shorthand.

yea, webkit doesn't support this shorthand:

+  -webkit-border-radius: 0 5px 5px 0;

-> http://gyazo.com/ab78b7d050b63d67d3086003d1a44874.png

heh? just tried latest win chrome, safari and even webkit nightly, none of these support that shorthand

+  -moz-border-radius: 0 5px 5px 0;

also has very little effect

It looks like patch in #58 fixed everything except IE9

not much point in linking to your localhost o.O

about the -moz-border-radius shorthand: it works in 3.6.x, but I don't think 3.5.x interprets 4 values properly

could any1 with a 3.5 confirm that this looks like this on FF 3.5.x

It looks the same in FF 3.5. Never had problems with the -moz-border-radius shorthand notion.

ok thanks, guess I was imagining incompatibilities again :x

Updated image from IE9 preview #2

#58 needs a reroll

@aspilicious don't you forget alphabetic ordering ;)

Istead of use:
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
It's shorter:
-webkit-border-radius: 4px 4px 0 0;

@oriol_e9g see #25 and #29

I think "We have short versions for moz and normal border radius, WE CAN'T DO IT FOR WEBKIT CAUSE SAFARI DOESN'T SUPPORT IT" should be in the patch.

@jbrown probably ment a comment, but I think it is just fine.

I mean put a comment in the CSS.

sorry - cross post

a comment at every occurrence? seems a bit over the top :x

other than that, 2 thumbs up!

#75: 746470_75_and_hopefully_last.patch queued for re-testing.

It's probably a good time to get back to this. Anyone want to re-roll?

Thanks @aspilicious! I manually checked through all of Drupal's CSS files, and this looks good to me. There were 2 coding style issues (not introduced by you) that needed fixing, so I did that in the attached patch. I think this is ready.

+++ themes/seven/jquery.ui.theme.css	6 Dec 2010 20:37:22 -0000
@@ -317,7 +319,8 @@
+  -webkit-border-radius: 10px;  ¶

Trailing white space.

+++ themes/seven/style.css	6 Dec 2010 20:37:22 -0000
@@ -164,12 +164,12 @@
+  border-radius:0 0 10px 10px;

Needed a space after the colon.

Powered by Dreditor.

#86: 746470-86.patch queued for re-testing.

Sorry about that. Thought it was necessary to trigger the test bot. Why does it say "#86: 746470-86.patch queued for re-testing."?

Sorry, not sure how this stayed off my radar for so long. I think I always meant to commit it and then a new RC was coming so I waited because I was nervous about breaking stuff.

Well, now release is coming and I'm still nervous about breaking stuff. ;) But I tried HEAD + this patch in Firefox 4 and Opera 11, and didn't see any ill effects. So I'm hoping that means it's good, or if not that we'll catch it in thorough testing between now and tuesday night.

Committed to HEAD!

The main trouble with this styles that by default IE9 uses "compatibility mode" to render documents by default. More info

Alt-9 in develoer menu (F12) allow switching to IE9 mode

So we need to output <meta http-equiv="X-UA-Compatible" content="IE=9" /> to use default IE9 render

@aspilicious Suppose my IE9 used "compatibility view" by default... I dont know how to change this default behavior

By default, IE9’s browser mode is IE9
if a user has set this to compatibility view, it would seem rude to ignore these user-settings and enforce IE9 mode