Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which CSS properties allow comma separated values?

Tags:

css

As I remember from my development and studies, I haven't faced CSS properties, that allow coma separated values to be set. Or maybe I encountered them, but very rarely, therefore don't remember any. I am not referring to filter property values, but they are also welcome to be noted.

Could you please point out if you know ones (CSS2, 3 suits)? And if they exists at all?

After getting your answers, I am going to check W3C Reference to find out if they exist.

Example:

selector { property: value, value, value; }
like image 739
Nik Sumeiko Avatar asked Jan 11 '12 14:01

Nik Sumeiko


1 Answers

You really just need to reference the property table.

Any css function, such as rgb(), takes its parameters as CSV (i.e. rgb(107, 203, 84))

In CSS2, the properties that might be separated via commas are:

  • cursor – if you're using a custom <uri>
  • font – see font-family
  • font-family – separating each font-family value (i.e. Arial, sans-serif)
  • voice-family – for listing <specific-voice> or <generic-voice> options.

Finding all the CSS3 properties that might allow CSV is a bit more challenging. CSS3 has been treated more as a set of modules to enhance CSS2 than a full blown spec to replace CSS2.

CSS backgrounds and Borders Module Level 3 allows the following properties to support CSV:

  • background – multiple background rules are separated, due to this all background sub-properties may also use CSV
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-clip
  • background-origin
  • background-size

CSS Color Module Level 3 adds rgba(), hsl(), and hsla() for color functions, all of which take comma-separated parameters

CSS Text Level 3

  • text-shadow

CSS Transitions Module Level 3

  • transition – similar to background, multiple transitions are separated by ,, and all sub-properties also use CSV.
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

CSS Animations Module Level 3

  • animation – see transition
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

cubic-bezier() function

CSS Fonts Module Level 3

  • font-feature-settings

character-variant(), styleset(),

like image 56
zzzzBov Avatar answered Nov 15 '22 20:11

zzzzBov