About Shortcut Properties in Stylizer

Oftentimes in CSS, there is a means to achieve a certain effect, but the implementation is unnecessarily complicated, or it varies between different browsers. In an attempt to further streamline the CSS development process, Stylizer uses Shortcut Properties to provide an entry point for these possibilities without having to handle these complications. Shortcut properties are special CSS properties unique to Stylizer that generate CSS in the underlying file. Stylizer has the following properties:

+opacity

There are 4 different ways to specify opacity on an element, each browser requiring a different technique. In Stylizer, if the following is defined:

.selector
{
  +opacity: 50%;
}

The following CSS is generated in the underlying CSS file:

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

+border-radius

There are 4 different ways to specify a border-radius on an element. In Stylizer, if the following is defined:

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

The following CSS is generated in the underlying CSS file:

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

There is currently no way to specify a border radius in Internet Explorer and Opera.

+box-sizing

The box-sizing property allows designers to toggle between the W3C box model, and the intuitive box model. The property is handled differently between browsers. In Stylizer, if the following is defined:

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

The following CSS is generated in the underlying CSS file.

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

+image-replace

The +image-replace shortcut property automates Image Replacement. Further details are discussed on the Image Replacement page.

+placement

The +placement shortcut automates the various methods of positioning elements on the page.