2014/03/07 クリエイター

衝撃の進化を遂げるCSS4の新機能を紹介!!革新的なコーディングが可能に!

衝撃の進化を遂げるCSS4の新機能を紹介!!革新的なコーディングが可能に! Webデザイナー、Webクリエイターの方へ。
もう噂は耳にしていますでしょうか。

そうです、CSS4が動き出しています。
未だにCSS3の一部ブラウザ実装がふらついていると言うのに。

CSS4がやってきます!!!!!!

「CSS3のブラウザ対応はやく全部対応してくれないかな・・・・」
と思ってたところに寝耳に水もいいところです。

でもゲームのアップデート情報なんかもそうですが、「おーついにアレが出来るようになるのかー!」ってなるとテンション上がりますよね。
いったいどんな新機能・草案があがっているのでしょうか。

今回は中でも記述方法に大きく影響しそうな新機能3つをご紹介!

親を指定する「?」Selector

CSSって基本的に子をどんどん指定していく書き方をしますよね。

まずはいつもの通り、特定の要素の子要素「a」の色を指定する方法。

#IDを親に持つ.classを親に持つulを親にもつliを親に持つa・・・

CSSで書くと
#id .class ul li a{
    color : #CCC;
}

上記の記述ですね。
また、指定した要素にのみ指定したい場合に
#id > .class > ul > li > a{
    color : #CCC;
}

なんて記述もしたりします。

ではいったいこの「?」セレクタはどう使うのでしょうか。
ざっくりと言ってしまうと。

子の親を指定するセレクタ」なのです!

これだけだと何の事だかわからないですよね。
もう少し分解して説明します。

手前で述べている#idを親に持つ.classを親に持つulを親に持つ・・
これにプラスして

liを親に持つaを「」に持つli

今までは「ulの子のli」という指定しかできませんでしたが、「aの親のli」と言った指定が出来るようになりました!
cssで書くと
#id > .class > ul > ?li > a

内容にaがある時のliだけ見た目を変えたい!なんて時に使うのでしょうか。
いずれにせよ、指定方法に幅があるだけでより柔軟なコーディングが出来そうです。
 

冗長の救世主!:matches()擬似クラス

これを待っていました!!
cssってとにかく記述が冗長になるんですよね。

sassを使うならともかく、まったく同じセレクタを永遠と書き連ねる日々・・・

例えば特定の要素のli下にあるdiv p span要素に共通するプロパティがあるので「,」区切りで適用する。
#content div.wrapper ul li div,
#content div.wrapper ul li p,
#content div.wrapper ul li span{
    color : #CCC;
}

従来であれば上記の書き方になりますが、「#content div.wrapper ul li」を3回も書いています。
面倒な上に、記述がどんどん増えていきます。

そんな中、:matches()擬似クラスを使うとッ!!!!!!
#content div.wrapper ul li :matches(div, p,span){
    color : #CCC;
}

これで済むんです!
すっきりとした記述が可能になります。

ちなみに
#content div.wrapper ul li :matches(div, p,span) a {
    color : #CCC;
}

上記のような記述で、子要素もすっきりとまとめられます。
これはパワフルな機能ですね。css3から実装してほしかった・・・
 

:not()が拡張!複数を指定できるワガママな疑似クラスへ!

css3に存在する:not()疑似クラスはご存知でしょうか。
かなり便利な機能でして、指定したセレクタ「以外」に適用するというものです。

一番使うのは、継承を解除したい時でしょうか。
クラス「points」がついた時は背景色もボーダーも解除したい!!

従来の書き方をすると・・・
#div .class ul li{
    background-color : #000;
    border : solid 1px : #FFF;
}

#div .class ul li.points{
    background-color : transparent;
    border : none;
}

こういったように打ち消すプロパティを一々書かなければなりませんでした。
しかしnotを利用した記述で。
#div .class ul li:not(.points){
    background-color : #000;
    border : solid 1px : #FFF;
}

すっきりと記述する事ができます。便利ですよね。
ただ指定できるものが一つだけな上に、疑似クラスの指定もできないので、歯がゆい場面がいくつかありました。

しかし、css4では大幅な機能拡張が起こり「複数指定」と「疑似クラス指定」が可能になります!
#div .class ul lo:not(.points,.points:hover){
    background-color : #CCC;
    border : solid 1px #FFF;
}

上記のように複数条件を追加していけます。
複雑なセレクタもすっきりと書けるので、かなり強力です。

いかがでしたでしょうか。
再度になりますが今回ご紹介したこの3つの新機能、いつ使えるのかはまったくわかりません。
そもそも先行対応しているブラウザすら皆無です。

待ち続けるしかないです。

なによりもまずCSS3をフル対応して欲しいですね。切実に。。。
 
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。