style属性でzoomを指定すると特定の状況でzoomが無効になる - dskd
公開日2014-12-05タグAdvent CalendarCSSCSS 珍百景 Advent Calendar 2014５日目のエントリ。 こちらでの再現ブラウザは Google Chrome 39.0.2171.71 と iOS 7.1.2 Mobile Safari。状況を詳しく説明すると、外部 CSS ファイル、及び style タグで zoom プロパティがすでに設定してある要素に対して、CSS で指定されている zoom 値と同じ値を style 属性で指定すると zoom が効かなくなるというもの。 style 属性で指定する zoom 値を変更できるデモを用意した。テキストエリアに数字を入れて隣の add ボタンを押すとその下の要素へ style="zoom: N" が付与されるようになっている。背景に 50px ごとのグリッドになっている画像を敷いたので、倍率が少しわかり
Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。 ちなみに後述しますがFirefoxではちゃんと適用されます。 ということで再現してみた以下の様なHTMLとCSSでこの現象は再現できます。 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. /*css*/ table { box-shadow: 0 0 10px black; padding: 10px; } tr { box-shadow: 0 0 10
YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー - morishitter blog
この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS 数あるCSSの設計手法のベースとなる、OOCSS (Object Oriented CSS、オブジェクト指向CSS)というものがある。OOCSSはその名の通り、CSSのクラス設計（ルールセットの定義）にオブジェクト指向プログラミングの考え方を少し取り入れたようなものだ。 OOCSSの原則として、「構造と見た目の分離」、「コンテナとコンテンツの分離」というものがある。OOCSSが提唱していることは要するに、HTMLの構造に依存しないセレクタを書き、レイアウトと見た目に関するルールセットは別
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
#CSS珍百景 Advent Calendar 2014
CSS珍百景 Advent Calendar 2014 1日目の記事です。 そもそもCSS珍百景って何要はバグです。 ブラウザでの表示がどう考えてもおかしかったり、いやいやこれはないだろ。みたいな、状況のこと。 別に100種類あるわけではないです。なんとなく語感が良かったから勝手に呼んでる。 では、1日目のCSS珍百景はこちらです。 input[type=radio]を拡大してみたスマホ向けのテクニックで「押しづらいinput[type="radio"]をtransform: scale(2);とかして大きくして押しやすくする」というテクニックがあります。 とまぁそれ自体は知っていたんですが、ChromeとSafariで見たらすごいことになってた。 検証用のデモはこちら 各ブラウザでの見た目を検証したデモの上から transform:scale(1.5);transform:scale(2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://2ndidea.com/css/strange-css-transitions/
brを非表示にした #CSS珍百景
今年、私が買ったArduino関連のもの #Arduino