0

I have two issues I have ignored so far, but I will really appreciate some light shed onto them.

First: how can I solve differences between Safari, Chrome and Firefox and the various tags that their engines render differently? Should I just write down the right attribute for each in the same css rule? Is there no better way?

Is there a way to separate the CSS sheets for these browsers as I am doing for IE? Is this recommended?

Second: What about CSS3 attributes? Should I just write them again in the same rule after the CSS2 attributes?

Will this cause problems validating the CSS with WC3?

MyStream
  • 2,533
  • 1
  • 16
  • 33
user1154641
  • 5
  • 1
  • 1
  • 7
  • Do you mean 'tags' (e.g. – MyStream Jan 17 '12 at 19:00
  • i meant vendor specific prefixes like -webkit, -khtml, -moz, -ms, -o, thanks for the correction :), by the way this is for a joomla based website, if this is important in any way – user1154641 Jan 17 '12 at 19:02
  • Vendor prefixes are 'properties' in CSS. Tags refer to part of HTML elements. – Rob Jan 17 '12 at 19:22
  • Should we have a wiki on HTML5 tags and CSS3 properties so we can make these things explicitly clear to people? – MyStream Jan 19 '12 at 01:50

2 Answers2

0

Welcome :)

If you start without the prefixes, you should write the code, generally, with all the semantically appropriate tags, first.

Then, you can decide what your goals are.

If you want W3C compliant CSS files, then you'd need to strip out the vendor specific prefixes by default. This would then allow the latest browsers to pick up the standardised CSS properties if they support them.

This will target less of your market than you might wish, so then you should ask if progressive enhancement is a possibility. If you can reasonably enhance the visuals by using css applied after the page has loaded, such as applying styles with jQuery, MooTools or Prototype libraries AND these libraries are already serving a purpose in your website, then you could apply additional styles with those libraries (and possibly use them in conjunction with Modernizr to determine which elements you may want to additionally support.

However, it's likely that a browser will skip a property it doesn't understand and will render the ones that it does, so I'd suggest that if you code it to W3C Standards first and then add in your additional vendor prefixes 'before' the final (correct) one, then you'll likely have satisfied reasonable measures to be compliant and meet design needs.

Edit: There is a little bit of confusion between validation results from:

http://validator.w3.org/

and writing valid code related to vendor prefixes to get CSS effects cross-browser:

List of CSS vendor prefixes?

for working on some cross-browser CSS, you might find http://csspie.com, for IE compatibility with some CSS3 properties, useful along with http://www.colorzilla.com/gradient-editor/ for cross-browser gradients and http://cssplease.com for code that gives you alternative vendor prefixes, including different versions of IE support for many different properties.

In terms of validation, here's what W3C says about it: (see comments here: W3 VALID cross browser css gradient,) and official docs here: http://www.w3.org/TR/css3-syntax/#vendor-specific

If you code according to the specifications first and test your code out against that and then add in your vendor prefixes to get the same effects on the browsers you want to support (see progressive enhancement: What is Progressive Enhancement?) then you can be more confident that your code is supporting the appropriate standards, adding value to those with more advanced browsers and still useful for those without additional features (see also WAI III compliance, 508 compliance and others if you want to write a more inclusive site).

Caveat: Web Apps may not always be inclusive or follow these guidelines depending on who the audience is.

Community
  • 1
  • 1
MyStream
  • 2,533
  • 1
  • 16
  • 33
  • thanks for the detailed answer. if i understand correctly i should first write a generic css that will get validated, then add all vendor based and css3 based attribute before the generic ones, and it will get validated. in addition it is ok to write all vendor specific tags on after the other. i have no experience in jquery or other libraries (wish i had, i am more of a joomla know how and graphic designer than a front end developer) i hope this will do. again thanks a lot. – user1154641 Jan 17 '12 at 19:19
  • @user1154641 - Vendor prefixes ARE valid CSS and written into the spec but will be flagged as errors by the validator. – Rob Jan 17 '12 at 19:23
  • @user1154641 - Although the code is actually valid code (as mentioned by Rob) if you want to 'pass' validation at http://validator.w3.org then you would write the ones without prefixes first and then add them when you're sure you have no errors. I would do as you described, but it's valid either way. – MyStream Jan 17 '12 at 19:59
  • the reason i want validation is also for google ratings, and for the validation tags, i guess i can "cheat" with this. should i put another CSS with all the non validated pre-fixes,is that logical? is it good practice, is this a stupid idea? – user1154641 Jan 17 '12 at 20:49
  • can anyone attache a link to a list of the differences among different vendor and the correct properties for each, i cannot find it anywhere... ): , thanks... – user1154641 Jan 17 '12 at 21:03
  • here it is!!! http://media.smashingmagazine.com/wp-content/uploads/2010/05/CSS3-Help-Sheet1.pdf | http://media.smashingmagazine.com/wp-content/uploads/2010/05/CSS2-Help-Sheet.pdf – user1154641 Jan 18 '12 at 17:06
0

If you are using jquery on the site you may want to look into PrefixFree. It's a script that adds the vendor prefixes for you, so for example your put border-radius:6px; in yor css and it reads the browser and adds the appropriate vendor prefix for you via js. I like it cause it keeps my css docs more readable.

Danferth
  • 1,841
  • 5
  • 19
  • 25
  • thanks,sounds great,i appriciate it, i will give it a try, is it good enough for a commercial site? – user1154641 Jan 17 '12 at 19:34
  • Yes, I use it without problems on our company site and we have visitors from around the world using various browsers. – Danferth Jan 17 '12 at 20:04