Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the meaning of the symbol '/'?

Tags:

css

I am looking for the meaning of the symbol /. I googled it without anky kind of sucess.

You can find everywhere, but here an example from today :

#identity:before
{
    /* some useless stuffs */
    border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
}

I already saw it with a font-size property.

I am not sure this question belongs to here. Say me, if I have to move it.

Thank you.

UPDATE

Chris B post a link about the case of font-size.

font: 12px/18px

mean :

font-size: 12px;
line-height: 18px;

It is a shorthand. Now, what the point with border-radius ?

like image 260
aloisdg Avatar asked Mar 31 '14 21:03

aloisdg


2 Answers

"If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally."

The slash in the code from your post is shorthand and differentiates between the vertical and horizontal radii.

http://www.w3.org/TR/css3-background/#border-radius

From the link above:

border-radius: 4em;

is equivalent to

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

and

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;
like image 105
Dryden Long Avatar answered Oct 07 '22 11:10

Dryden Long


CSS grammar has three types of list elements separators:

  • '/' (slash)
  • ' ' (whitespace)
  • ',' (comma)

So that border-radius above can be written in LISP style as this:

(30% 0% 30% 0%) (75% 0% 75% 0%); 

list of two elements where each element is a list of four elements by itself.

Unfortunately CSS grammar is not consistent with priority of this separators. In border-radius property ' ' has higher priority than '/' but in font declaration priorities are different, so this:

font:italic bold 12px/30px Georgia, serif;

gets parsed as this

font:italic bold (12px 30px) (Georgia serif); 
like image 43
c-smile Avatar answered Oct 07 '22 13:10

c-smile