Valid rounding corners

Can it be done without Javascript?

Page 1 of 1

14 Replies - 3064 Views - Last Post: 02 July 2010 - 05:29 PM

#1 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Valid rounding corners

Posted 01 July 2010 - 11:14 AM

Heya guys, I am having a small problem getting my CSS to validate.

In particular with:
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;


I thought these were valid, however the validator is refusing to accept it, is their anyway of fixing this without changing to a Javascript library?
Is This A Good Question/Topic? 0
  • +

Replies To: Valid rounding corners

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 11:17 AM

View PostKingCuddles, on 01 July 2010 - 06:14 PM, said:

I thought these were valid, however the validator is refusing to accept it, is their anyway of fixing this without changing to a Javascript library?

nope, those are browser specific and as such not part of any official specification. however you can add border-radius: 4px; this is the official property (but most browsers still ignore it)
Was This Post Helpful? 2
  • +
  • -

#3 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 11:25 AM

I thought they where official CCS3 specification.

Dang... :shit:
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 11:30 AM

that’s not the official spec. it’s located at W3C (CSS3 background/border module)

This post has been edited by Dormilich: 01 July 2010 - 11:30 AM

Was This Post Helpful? 1
  • +
  • -

#5 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 11:38 AM

Bugger it - alright, looks like the client has a choice to make :)

Thanks a bunch Dormilich.

This post has been edited by KingCuddles: 01 July 2010 - 11:43 AM

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 11:39 AM

never mind. knowing where the specs and manuals are is my speciality.
Was This Post Helpful? 1
  • +
  • -

#7 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 11:59 AM

Hmmm...

I tried

border-radius: 4px;

Which gave me the error:

Quote

Property border-radius doesn't exist in CSS level 2.1 but exists in : 4px 4px.


So I tried:

border-radius: 4px 4px;

Assuming that's what it meant, however it then gave me the error:

Quote

Property border-radius doesn't exist in CSS level 2.1 but exists in : 4px 4px 4px 4px.


What am I doing wrong?

Also with border-radius, can you do individual corners as with -webkit/moz-border-radius.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 12:01 PM

border-radius is part of CSS3 not of CSS2.1 or any other pre-CSS3 spec.

all you can do with -moz/-webkit/-o/-khtml-border-radius is the same as border-radius (just a question of support)

This post has been edited by Dormilich: 01 July 2010 - 12:02 PM

Was This Post Helpful? 1
  • +
  • -

#9 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 12:02 PM

Let me guess, there is no way to force it to validate with CSS3 like you can with different versions of HTML?
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 12:04 PM

that depends on the validator. invalid/unsupported CSS instructions are ignored in the browser
Was This Post Helpful? 1
  • +
  • -

#11 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 12:06 PM

Oh bugger it then, the client is insistent that it has no Javascript, has rounded corners and validates.

So he will just have to lose CSS validation.
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 12:07 PM

tell him: "you cannot validate CSS3 with the CSS2.1 specification."
Was This Post Helpful? 2
  • +
  • -

#13 KingCuddles  Icon User is offline

  • D.I.C Regular

Reputation: 176
  • View blog
  • Posts: 496
  • Joined: 20-December 08

Re: Valid rounding corners

Posted 01 July 2010 - 12:17 PM

View PostDormilich, on 01 July 2010 - 11:07 AM, said:

tell him: "you cannot validate CSS3 with the CSS2.1 specification."


He says he would rather lose CSS Validation than use Javascript, which works for me because I have very little knowledge of Javascript, although I am sure I could manage to bodge a rounded corner script together.

Quote

all you can do with -moz/-webkit/-o/-khtml-border-radius is the same as border-radius (just a question of support)


I wasn't aware you could do -o-border-radius: xxpx; -khtml-border-radius: xxpx; as I figured Opera would read mox/webkit and render it.

-o-border-radius: xxpx; -khtml-border-radius: xxpx;

Is that the correct syntax?
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 01 July 2010 - 12:19 PM

er, I think itís the same as in the standard.
Was This Post Helpful? 1
  • +
  • -

#15 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Valid rounding corners

Posted 02 July 2010 - 05:29 PM

Yep. Opera has already implemented the proper border-radius style, so there is no need for a vendor specific prefix for Opera. So have both Mozilla and Webkit, by the way, so using a vendor specific prefix for that style isn't really needed, except for legacy support. And besides that, unused/unrecognized CSS styles are ignored by browsers, so there is no harm in putting the real style in there, even if most browsers don't yet support it. They will pick it up when they do. (CSS is designed for graceful degradation :))

Just keep in mind that the vendor prefixed styles are meant to be used for testing when a new standard is being developed (as is the current case with CSS3), so it's not really a good idea to use them in a real product, even to support older browsers. They are used to test things before they are ready to be rolled into the stable product, so you may find that using a vendor prefix may trigger unwanted/incorrect behavior in older browsers. Browser vendors are free to use, discard or change the vendor prefixed styles at their whim, so they are highly unreliable.

As for validating the CSS, it is 99% (nothing is guaranteed... ever :)) safe to ignore "doesn't exist" warnings that relate to vendor specific styles. They are a part of the overall CSS spec (theoretically, at least), even if the properties themselves aren't technically a part of the spec you are validating against. In my opinion, such errors shouldn't even be errors. More like notices or hints.

Quote

I wasn't aware you could do -o-border-radius: xxpx; -khtml-border-radius: xxpx; as I figured Opera would read mox/webkit and render it.

That would be highly irregular, if not outright dangerous. They are "vendor specific" for a reason. (See this article for more about that.)
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1