c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開發中です。

CSSグラデーション (gradient) にvendor-prefixを付けるScss

[Chromium Blink http://www.chromium.org/blink ]が出てvendor-prefixが消えてゆくだろう事大変喜ばしいが、

Vendor Prefixes

Historically, browsers have relied on vendor prefixes (e.g., -webkit-feature) to ship experimental features to web developers. This approach can be harmful to compatibility because web content comes to rely upon these vendor-prefixed names. Going forward, instead of enabling a feature by default with a vendor prefix, we will instead keep the (unprefixed) feature behind the “enable experimental web platform features” flag in about:flags until the feature is ready to be enabled by default. Mozilla has already embarked on a similar policy and the W3C CSS WG formed a rough consensus around a complementary policy.


未だ消えていない。よって自分の趣味のweb siteでなければ書く必要が有る。愚かしい。結局書いている自分がいちばん愚かしい。
linear-gradient等、[Scss http://sass-lang.com/ ]で毎回書いてるので、メモしておく。

// Not consider about old WebKit syntax.
@mixin gradient($property, $gradient_type, $params...) {
  #{$property}:    -moz-#{$gradient_type}-gradient($params);
  #{$property}:      -o-#{$gradient_type}-gradient($params);
  #{$property}:  -khtml-#{$gradient_type}-gradient($params);
  #{$property}: -webkit-#{$gradient_type}-gradient($params);
  #{$property}:     -ms-#{$gradient_type}-gradient($params);
  #{$property}:         #{$gradient_type}-gradient($params);
}

// Use like below.
div {
  background: -webkit-gradient(linear, left top, left bottom, from(#afc), color-stop(50%, #acf), to(#sfc));
  @include gradient(background, linear, top, #afc, #acf, #afc);
}
div {
  background: -webkit-gradient(radial, center center, left bottom, from(#009), to(black));
  @include gradient(background, radial, circle, #009, black);
}

古いWebKit (Safari 4-5.0, Chrome 1-9) は無かった事にしました。

cf. [CSSやJSのvendor-prefixは、本来もなにも #memo http://c4se.hatenablog.com/entry/2012/05/11/212648 ]