CSS

[CSS3] background-clipの実例紹介

2013/12/21 CSS

CSS Property Advent Calendar 2013 — 22日目】

最近background-clipを愛用しているので何ができるのか実例を紹介。

(さらに…)

[Sass] @extend の挙動

2013/08/01 CSS

classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。


%ext {
 color:red;

  &::before {
    content: 'ext';
  }

  &[data-aaa="ext"] {
    border:solid 1px red;
  }
}

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

.klass[data-bbb="bbb"] {
   background:black
}

.klass .child2 {
   height:100px;
}

.klass2 {
 @extend .klass;
}

.klass3 {
 @extend .klass2;
}

.klass4 {
 @extend %ext;
  box-shadow:0 0 5px #000;
}

結果こうなる

.klass, .klass2, .klass3, .klass4 {
  color: red; }
  .klass::before, .klass2::before, .klass3::before, .klass4::before {
    content: 'ext'; }
  [data-aaa="ext"].klass, [data-aaa="ext"].klass2, [data-aaa="ext"].klass3, [data-aaa="ext"].klass4 {
    border: solid 1px red; }

.klass::after, .klass2::after, .klass3::after {
  content: 'klass'; }
.klass[data-aaa="aaa"], [data-aaa="aaa"].klass2, [data-aaa="aaa"].klass3 {
  background: pink; }
.klass.amb, .amb.klass2, .amb.klass3 {
  color: yellow; }
.klass .child, .klass2 .child, .klass3 .child {
  width: 100px; }

.klass[data-bbb="bbb"], [data-bbb="bbb"].klass2, [data-bbb="bbb"].klass3 {
  background: black; }

.klass .child2, .klass2 .child2, .klass3 .child2 {
  height: 100px; }

.klass4 {
  box-shadow: 0 0 5px #000; }

classに対する@extendは対象範囲が広い。

.klassのスタイルを最初に設定しているこの部分だけを@extendする事に期待して

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

@extendを書いていたとしても、

.klass2 {
 @extend .klass;
}

フタを空けてみれば .klass がセレクタに含まれているスタイルの全てにextendされている。

本当にextendした部分だけピックアップしてplaceholder selecterに置き換え、
それをextendした方がまだ余計なセレクタを生まずに済むが、
&の置換に関してはまだ不具合(と思われる挙動)があるので注意が必要。

[js,css] Android4.1 が返す element.style.cssText の値が他と違う件

2013/04/23 CSS No comments ,

style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。

var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';

el.style.cssText = '-webkit-animation:hoge;';

document.write(el.style.cssText);


(さらに…)

[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた

2013/02/27 CSS 1 comment ,

IE10が出たそうで。

(さらに…)

[Sass] Speech Bubble(tail) Mixin

2013/02/25 CSS No comments

CSSでふきだし作る時に最も面倒くさいしっぽを全方位カバーしたmixinが出来てしまいました。
Sassだけで動作します。

しっぽの向きはtriangle generatorと同じ。
枠線がある場合、しっぽの大きさを超える太さにすると背景色のしっぽが消えて線だけになります。

(さらに…)