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
今年のネーミングルール #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
Performant UIs using CSS magic
Performance beyond HTTP Animation to improve performance Well executed animation instills perception of performance Not the bad old days of flash 20s transitions Stripe checkout a great example. How can I do this? Bounce.js Pseudo based physics The web is capable of native performance* Case study — ScrollListView.js Performant scrolling library Reusable list items reordered on scroll Uses flexbox
No More Tools
As creatives we constantly search for ways to optimise and streamline workflows. Currently we’re being bombarded with more tools than ever. But how do we know that we reached a tipping point, when the apparatus we pick introduces more complexity and wastes way more time that it was supposed to save? As craftspeople, how do we maintain simplicity and learn to rely on bare-bones solutions? We’ll hav
Talk videos now available | CSSConf Australia 2014
We’re excited to announce that the entire 10 hours of talks by our amazing speakers are now available to watch online. If you were lucky enough to be there, we hope you enjoy reliving the day. If you weren’t able to make it, we’re glad we can make these available, and we hope to see you next year :) The story of how CSSConf came to be, how you can be involved, the intersection of design and develo
Google 日本語入力チームからの新しいご提案
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
brを非表示にした #CSS珍百景
今年、私が買ったArduino関連のもの #Arduino
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Using flexbox to save your sanity // Speaker Deck
GitHub - rstacruz/newsreader-sample-layout
cssconf 2014