Сниппеты для Stylus

Здесь вы сможете найти полезные сниппеты для css препроцессора stylus. (подробнее о самом препроцессоре здесь) Большинство из них ориентированы на кроссбраузерность. Все браузеры, которые поддерживают те или иные свойства, можно посмотреть на caniuse

Все сниппеты можно добавить в отдельно созданный файл, например, config.styl и через @import 'config' добавить в основной файл stylus.


Содержание по сниппетам:

Stylus border-radius

border-radius()
	-moz-border-radius arguments /* Firefox */
	-webkit-border-radius arguments /* Chrome, Safari */
	-khtml-border-radius arguments /* KHTML */
	border-radius arguments /* Css 3*/
	behavior unquote('url(pie/PIE.htc)') /* для поддержки плохих IE */

Для того чтобы border-radius поддерживался в IE можно использовать PIE.htc (подробности здесь), либо другую альтернативу.

Stylus box-shadow

box-shadow()
	-moz-border-shadow arguments /* Firefox */
	-webkit-border-shadow arguments /* Chrome, Safari */
	border-shadow arguments /* Css 3*/

Stylus transition

transition()
	-webkit-transition arguments /* Chrome, Safari */
	-moz-transition arguments /* Firefox */
	-o-transition arguments /* Opera */
	-ms-transition arguments /* IE новые */
	transition arguments /* Css 3*/

Stylus opacity

opacity(n)
    -ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+n*100+')"') /* IE */
    filter unquote('alpha(opacity='+n*100+')')
    -moz-opacity n /* Firefox */
    -khtml-opacity n /* KHTML */
    opacity n /* Css 3*/


Комментарии закрыты к записи