PCSS Functions

PCSS Functions Reference

Return to home page

Constants reference

These are functions to replace or enhance CSS native capabilities. Most of them use the default unit. In all examples below, the default unit px is used

KERN Shortcut for letter-spacing KERN:[value] (uses default unit) KERN:-1 letter-spacing:-1px
LINEH Shortcut for line-height LINEH:[value] (uses default unit) LINEH:3 line-height:3px
STROKE Shortcut for border with attribute solid STROKE:[value] [color] (uses default unit for value) STROKE:3 #fff border:3px solid #fff
BOUNDS Shortcut for both margin and padding, gathered in one function. To bypass one of them use the value auto or leave it blank BOUNDS:[padding value(s)],[margin value(s)] (uses default unit) BOUNDS:10,10 20 padding:10px; margin:10px 20px BOUNDS: 10 2 5 4,auto padding:10px 2px 5px 4px BOUNDS: ,5 margin:5px
MAX Shortcut for both max-width and max-height. To bypass one of them use the value auto. This function includes a MS IE 6 fix: min-width and min-height are replaced by width and height MAX:[width value] [height value] (uses default unit) MAX: 400 200 max-width:400px; max-height:200px MAX: auto 100 max-height:100px
MIN Shortcut for both min-width and min-height. To bypass one of them use the value auto. This function includes a MS IE 6 fix: min-width and min-height are replaced by width and height and a overflow:hidden value is added MIN:[width value] [height value] (uses default unit) MIN: 250 100 min-width:250px; min-height:100px MIN: 150 auto min-width:150px
POS Shortcut for both top and left. To bypass one of them use the value auto POS:[left value] [top value] (uses default unit) POS: 10 200 left:10px; top:200px POS: auto 100 top:100px
Z Shortcut for z-index Z:[value] Z: 10 z-index:10
SIZE or S Shortcuts for width and height. To bypass one of them use the value auto SIZE: [width value] [height value] or S: [width value] [height value](uses default unit) SIZE: 100 60 width:100px; height:60px SIZE: 200 auto width:200px S: auto 100 height:100px
BGPOS Shortcut for background-position BGPOS: [left value] [top value] (uses default unit) BGPOS: 20 40 background-position:20px 40px BGPOS: left top background-position:left top
BGIMG Shortcut for background-image. Makes use of default image directory (definition imgdir) BGIMG: [image reference] BGIMG: image.gif background-image:url(imagedir/image.gif) (given an default image directory named "imgdir")
BGCOLOR Shortcut for background-color BGCOLOR: [color string] BGCOLOR: #555 background-color:#555 (color value is not processed)
BORDERRADIUS or RADIUS Shortcuts for border-radius and broser-specific prefixes such as -moz-border-radius, detected by server-side routines to generate an optimized code. It currently covers the most common use of border-radius, with equal radii in all sides. border-radius is currently not supported in any MS IE version. RADIUS: [radius value] or BORDERRADIUS: [radius value] (uses default unit) RADIUS: 5 -moz-border-radius:5px; border-radius:5px (if user agent is Mozilla Firefox) -webkit-border-radius:5px; border-radius:5px (if user agent is Webkit)
BOXSHADOW or SHADOW Shortcuts for box-shadow and browser-specific prefixes such as -moz-box-shadow, detected by server-side routines to generate an optimized code. box-shadow is not supported in the same way in all MS IE versions by now, in this case a filter (or -ms-filter, depending on the MS IE version) is used instead, but with the standard angle of 135 degrees (the syntax and the results are different). SHADOW: [left value] [top value] [blur value] [color] or SHADOW: [left/top value] [blur value] [color] (uses default unit) SHADOW: 5 10 10 #000 -moz-box-shadow:5px 10px 10px #000; box-shadow:5px 10px 10px #000 (if user agent is Mozilla Firefox) -webkit-box-shadow:5px 10px 10px #000; box-shadow:5px 10px 10px #000 (if user agent is Webkit) SHADOW: 3 12 #888 -moz-box-shadow:3px 3px 12px #888; box-shadow:3px 3px 12px #888 (if user agent is Mozilla Firefox) -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=3px, Direction=135, Color='#888')"; box-shadow:3px 3px 12px #888 (if user agent is MS IE)
OPACITY Shortcut for opacity and browser-specific prefixes such as -moz-opacity, detected by server-side routines to generate an optimized code. The value is normalized for MS IE form, which is slightly different but it can achieve the same results. OPACITY: [value] values from 0 to 1 OPACITY: .5 -moz-opacity:.5; opacity:.5 (if user agent is Mozilla Firefox) opacity:.5 (if user agent is Webkit) -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity:.5 (if user agent is MS IE 8/9)
TRANSFORM Shortcut for transform and browser-specific prefixes such as -moz-transform, detected by server-side routines to generate an optimized code. transform is currently not supported in many browser versions. TRANSFORM: [transformation string] TRANSFORM: skew(30deg,-10deg) -moz-transform: skew(30deg,-10deg); transform:skew(30deg,-10deg) (if user agent is Mozilla Firefox) -o-transform: skew(30deg,-10deg); transform:skew(30deg,-10deg) (if user agent is Opera) -ms-transform: skew(30deg,-10deg); transform:skew(30deg,-10deg) (if user agent is MS IE)
TRANSITIONS Shortcut for transitions and browser-specific prefixes such as -moz-transitions, detected by server-side routines to generate an optimized code. transitions is currently not supported in many browser versions. If just a number is provided, an alternative syntax is used. TRANSITIONS: [transitions string] or TRANSITIONS: [seconds value] TRANSITIONS: all 0.3s ease-in; -moz-transitions:all 0.3s ease-in;transitions:all 0.3s ease-in; (if user agent is Mozilla Firefox) -ms-transitions:all 0.3s ease-in;transitions:all 0.3s ease-in; (if user agent is MS IE) TRANSITIONS: 1.2; -webkit-transitions:all 1.2s ease-out;transitions:all 1.2s ease-out; (if user agent is Webkit) -o-transitions:all 1.2s ease-out;transitions:all 1.2s ease-out; (if user agent is Opera)
GRADIENT Shortcut for linear-gradient modes of background-image CSS property and browser-specific prefixes such as -moz-linear-gradient, detected by server-side routines to generate an optimized code. The double syntax required by Webkit is covered by this function GRADIENT: [color1] [color2] GRADIENT: #FFF #000 background-color:$FFF; background-image:-moz-linear-gradient(top, #FFF, #000); background-image:linear-gradient(top, #FFF, #000) (if user agent is Mozilla Firefox) background-color:$FFF; background-image:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000));background-image:-webkit-linear-gradient(top, #FFF, #000); background-image:linear-gradient(top, #FFF, #000) (if user agent is Webkit) background-color:$FFF; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF', EndColorStr='#000'); background-image:linear-gradient(top, #FFF, #000) (if user agent is MS IE)
ROTATE Shortcut for rotate() mode of transform CSS property and browser-specific prefixes to transform, detected by server-side routines to generate an optimized code. transform is currently not supported in some browser versions. In MSIE legacy versions, a calculation is made to generate a matrix filter equivalent to CSS-transform's rotation. ROTATE: [value, in degrees] (without units) ROTATE: 10 -moz-transform: rotate(10deg); transform:rotate(10deg) (if user agent is Mozilla Firefox) -o-transform: rotate(10deg); transform:rotate(10deg) (if user agent is Opera) filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand') (if user agent is MS IE 9 and lower)