Shortcut Properties

Shortcut properties are special CSS properties unique to Stylizer that streamline your development process by generating common CSS patterns. Shortcut properties are prefixed with a + character.

The CSS code generated by shortcut properties is not displayed in the Code Grid; instead, it is sent directly to the browser. When the file is saved, shortcut properties are saved as comments in the CSS, and the code they generate is written as ordinary CSS.

Stylizer provides the following properties:

+animation

This property represents the CSS animation property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+animation: 5ms fast-animation ease-out infinite;
}

CSS File

.selector {
	-webkit-animation: 5ms fast-animation ease-out infinite;
	-ms-animation: 5ms fast-animation ease-out infinite;
	-o-animation: 5ms fast-animation ease-out infinite;
	animation: 5ms fast-animation ease-out infinite;
}

The subproperties of animation are supported as well: +animation-name, +animation-duration, +animation-timing-function, +animation-delay, +animation-interation-count, +animation-direction, +animation-fill-mode, and +animation-play-state.

+border-radius

This property represents the CSS border-radius property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+border-radius: 5px;
}

CSS File

.selector {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px 5px 5px 5px;
}

+box-shadow

This property represents the CSS box-shadow property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+box-shadow: 1px 2px 5px #222222;
}

CSS File

.selector {
	-moz-box-shadow: 1px 2px 5px #222222;
	-webkit-box-shadow: 1px 2px 5px #222222;
	box-shadow: 1px 2px 5px #222222;
}

+box-sizing

This property represents the CSS box-sizing property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+box-sizing: border-box;
}

CSS File

.selector {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

+min-height

This shortcut property is a workaround for the fact that older versions of Internet Explorer do not support the min-height property, and essentially treat height as though it were min-height.

Code Grid

.selector {
	+min-height: 50px;
}

CSS File

.selector {
	-height: 50px;
	min-height: 50px;
}

+opacity

There are 4 different ways to specify the transparency level of an element, each browser using a different technique.

Code Grid

.selector {
	+opacity: 50%;
}

CSS File

.selector {
	-filter: alpha(opacity=50);
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

+placement

The +placement shortcut automates the various methods of positioning elements on the page. Further details are discussed in the Placement Modes topic.

+transform

This property represents the CSS transform property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+transform: skewx(10deg) translatex(150px);
}

CSS File

.selector {
	-webkit-transform: skewx(10deg) translatex(150px);
	-moz-transform: skewx(10deg) translatex(150px);
	-o-transform: skewx(10deg) translatex(150px);
	-ms-transform: skewx(10deg) translatex(150px);
	transform: skewx(10deg) translatex(150px);
}

+transition

This property represents the CSS transition property and repeats its value with vendor-prefixed versions.

Code Grid

.selector {
	+transition: width 2s, height 2s, background-color 2s;
}

CSS File

.selector {
	-webkit-transition: width 2s, height 2s, background-color 2s;
	-moz-transition: width 2s, height 2s, background-color 2s;
	-o-transition: width 2s, height 2s, background-color 2s;
	+transition: width 2s, height 2s, background-color 2s;
}

The sub-properties of transition are supported as well: +transition-delay, +transition-duration, +transition-property, and +transition-timing-function.

Back to top

/*[clearfix]*/ .a {
}
/*[clearfix]*/ .b, .c {
}
/*[clearfix]*/ .c {
}

.a:after, .b:after, .c:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      font-size: 0;
}
.a, .b, .c {
      display: inline-block;
      *height: 1px;
}

@media (min-width: 500px) {
    /*[clearfix]*/ .d {
    }
}
/*[clearfix]*/ .d {
}

.d:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      font-size: 0;
}
.d {
      display: inline-block;
      *height: 1px;
}
@media (min-width: 500px) {
    .d:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
          font-size: 0;
    }
    .d {
          display: inline-block;
          *height: 1px;
    }
}