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珍百景 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
brを非表示にした #CSS珍百景
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Using flexbox to save your sanity // Speaker Deck
cssconf 2014