特定のベンダープレフィックスのみを付けるには
前回はTwitter Bootstrapを題材として、
- 「この値がfooの場合に、
この値をvarにする」
といった、
まず、
// LESS
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
これは前回解説したように、
しかし、
- 「今回はiOSとAndroidだけに対応すればいいんだよな」
ということがありますよね。特にスマートフォンにおいて、
それでは
一般的なプログラミング言語では
LESSの場合、
先ほど書いた-wekit/
「webkitに対応して、mozには対応しない」という処理を書く
まず、
// LESS
@webkit: true;
@moz: false;
.border-radius(@radius)when(@webkit) {
-webkit-border-radius: @radius;
}
.border-radius(@radius)when(@moz) {
-moz-border-radius: @radius;
}
.border-radius(@radius) {
border-radius: @radius;
}
/* Compiled CSS */
div {
-webkit-border-radius: 5px;
border-radius: 5px;
}
このコードでは、
- 「webkitに対応して、
mozには対応しない」
という処理を書いています。新しい書き方が少し多いので、
@webkit: true;
@moz: false;
まず、
- 「webkitに対応して、
mozには対応しない」
と定義します。今後状況に応じて、
.border-radius(@radius)when(@webkit) {
-webkit-border-radius: @radius;
}
.border-radius(@radius)when(@moz) {
-moz-border-radius: @radius;
}
when(@webkit)で
同様に、
今回、
一方@mozの値はfalseなので、
.border-radius(@radius) {
border-radius: @radius;
}
このように、
つまりこのmixinでは
- webkitは対応/
mozは非対応 - webkitに対応している
(@webkitがtrine) 場合 - →-webkit-border-radius: @radius;
- mozに対応している
(@mozがtrine) 場合 - →-moz-border-radius: @radius;
- どちらの場合でも border-radius: @radius;
という一連の処理をしています。
その結果、
/* Compiled CSS */
div {
-webkit-border-radius: 5px;
border-radius: 5px;
}
もちろん、
PCとMobileでベンダープレフィックスを分けるには
同様の手順で、
- Mobileでは-webkitのみ対応
- Mobile以外のものでは、
すべてのブラウザに対応すべく、 -webkit/ -moz/ -o/ -msを付ける
// LESS
@media: pc;
.border-radius(@radius)when(@media = mobile){
-webkit-border-radius: @radius;
}
.border-radius(@radius)when not(@media = mobile){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
}
.border-radius(@radius) {
border-radius: @radius;
}
/* Compiled CSS */
div {
.border-radius(5px);
}
こちらも上から順を追って見てみましょう。
// LESS
@media: pc;
まず、
.border-radius(@radius)when(@media = mobile){
-webkit-border-radius: @radius;
}
ここでは
先ほどは、
この記述では、
.border-radius(@radius)when not(@media = mobile){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
}
ここで新しく
@mediaの値はpcなので、
.border-radius(@radius) {
border-radius: @radius;
}
最後に、
なお、
- 「mobileの対応ブラウザを増やしたい」
などの編集が発生することを想定して、
このように、
次回は、