CSS

Chromeでボタンをクリックしたときのフォーカスリング

geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのはcs.chromium.org。<button>なので"HTMLButtonElement"で検索して、そ</button>…

Autoprefixerのブラウザ指定をpackage.jsonの`browserlist`からする

Autoprefixerのブラウザの設定がpackgage.jsonに書けるようになっていた

するするさせたい:サイボウズ採用情報のアニメーション(その2)

サイボウズの採用情報ページのアニメーションがするするしていない問題。レイヤーを分けて描画範囲を小さくしたり、CSS Transformsでアニメーションさせることによってするするさせられた。

FirefoxのCSS Unprefixing Service

追記(2016-09-23):-webkit-接頭辞のサポートを一部のサイトのみ対象とする方針はその後方針転換し、すべてのサイトを対象とすべく必要な機能やエイリアスの実装が行われ、Firefox 49でリリースされた。 Webkit! RESOLVED FIXED - otsukare Firefox 49 fix…

-webkit-alt プロパティ

PUAアイコンフォントのアクセシビリティ - Unreviewed これを読んでいて、内容とはまったく関係ないのだけれど -webkit-alt プロパティのことを思い出した。昨年11月に実装されたgenerated contentの読みを提供するためのプロパティだ。 Changeset 159591 – …

表現のコンポーネントとエレメント指向

このところいろいろ思っていたWeb Componentsでなにを要素とするのかという疑問。Polymerに表現を要素化しているものがあったので、すこし考えてみた。

Sassでlinear-gradient()のmixinをつくる その6

CSS

このエントリはCSS Preprocessor Advent Calendar 2012の記事の続編です。 察せ。 Sass 3.3がついにリリースされました。リリースされないものだと思っていましたがよかったです。アルファ版からインストールしていましたが、いまいち使っていませんでした。…

システムの文字サイズを取得できないものか

80歳の方にiPad Airを使わせてみた方のエントリを読んだ。 実録・80歳の祖父母にiPadを贈った話 | ポッケのなかみ 母とNexus 7 ちょうど年末年始の帰省時に母(60くらいだったかな?)にNexus 7(2012年モデル)を渡したのだけど、このエントリにある「ボタ…

all, initial, unsetでCSSのリセットと継承回避をする

CSS

追記(2018年4月13日):紹介した機能の実装が進みました(Can I use:allプロパティ、initial、unset)。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のもので…

Chromium DashboardのCSS usage metricsとぼくらのusage metrics

火曜にGoogle JapanであったChrome Tech Talk Night #6でライトニングトークをしてきた。 イベント中ずっと資料とコードを書いてて内容をほとんど聞いてないという残念っぷり…こういうのやめたいね。 Chromium Dashboardの概要と、9月に追加されたCSS metric…

Autoprefixer ― CSSのベンダー接頭辞をいろいろする

CSS

以前CSS-Tricksの記事で知ったAutoprefixerというの、ようやく試してみた。 ai/autoprefixer Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks CSS-Tricksの記事読んだほうがいいと思うけど、月一の…

Blinkでメディアクエリーのwidth/heightがスクロールバーを含むように

Chrome 28がBetaに移った。表面上とくに違いはないだろうけれど、BlinkなChromeですよ。 さて、タイトルで言ったとおりの変更がBlinkに行われた。 144cc4f (@149832) - chromium/blink — Include scrollbar size in @media width/height M28に入るかなと思っ…

Sassでlinear-gradient()のmixinをつくる その5

CSS

CSS Preprocessor Advent Calendar 2012の記事の続編…というか完結編です。3月まで持ち越すつもりはなかったのに…… Part 7: あとはもう、まとめる 今回はPart 4, Part 5, Part 6で作ったmixinをひとつのmixinにします。どのmixinも type-of() 関数で、mixin…

Sassでlinear-gradient()のmixinをつくる その4

CSS

2013年2月も終わりかけですが、CSS Preprocessor Advent Calendar 2012の記事の続編です。 今回は linear-gradient() から、SVGのグラデーション画像を生成するmixinをつくります。なんでそんなことをするのかというと、IE9が linear-gradient() を実装して…

Sassでlinear-gradient()のmixinをつくる その3

CSS

2013年1月も後半ですが、CSS Preprocessor Advent Calendar 2012の記事の続編です。 さて、数日前にWebKitが接頭辞なしのグラデーションをサポートしました。Chrome 26やSafari 7?になれば幸せになりそうです。 でも、GingerbreadのAndroidブラウザーなど、-…

Sassでlinear-gradient()のmixinをつくる その2

CSS

誰がうれしいのかわからない、CSS Preprocessor Advent Calendar 2012の記事の第2弾です。今回は -webkit-gradient() への変換について書こうと思ったのですが、ひとつ忘れてたことがあったので、それについて書きます。 Part 4 ― type_of() で処理を振り分…

Sassでlinear-gradient()のmixinをつくる

CSS

このエントリはCSS Preprocessor Advent Calendar 2012、13日目のエントリです。 Sassを本格的に使い始めてもう6ヶ月経つのですが、まだまだだなあと思うこと多々です。というわけで、勉強のためCSSのグラデーションを出力するmixinを書いてみました。 Part …

:-moz-placeholderから::-moz-placeholderに

コロンに注目ね。Mozillaはこれまでplaceholder属性にスタイルをつけるために、:-moz-placeholderという擬似クラスを使っていたんだけど、Firefox 19からは::-moz-placeholderという擬似要素になる。 737786 – Switch from :-moz-placeholder to ::-moz-plac…

さらばmozとoのdevice-pixel-ratio

そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @media (-webkit-min-device…

FirefoxのFlexbox実装、進行中

MozillaのBug 666041がRESOLVED FIXEDになった。また一歩CSS Flexboxのサポートに近づいた。 Bug 666041 – CSS Flexbox Layout Level 3 バグのタイトル的にはメタバグっぽいんだけど、そうじゃなくて、基本的なところの実装みたい。なのでMultiline Flexbox…

接頭辞外しと-webkit-サポート

もう書くのだるいんだけど、またまたベンダー接頭辞的なおはなし。 Opera 12.50では標準と-webkit-のみ (-o-さよなら) 今月に入って、Opera 12.50で使われるPrestoのバージョンが2.12になった。 まず3日のsnapshotでは、接頭辞なしのTransitions, 2D Transfo…

@supports ― CSSのFeature Queries

Twitter殺しなタイトルだ。Firefox NightlyにCSS Conditional Rulesの@supportsが入った。 Bug 649740 - Implement @supports Support for @supports in Firefox Nightly • Cameron McCormack's blog 仕様がまだ初期段階なので、他のベンダーや仕様の動きが…

Firefox (Nightly)で接頭辞なしのCSS Transitions, CSS Animationsも実装

うっ、一日待っとけばよかった。TransitionsとAnimationsにも接頭辞なしのが実装された。 Bug 762303 - Unprefix CSS Transition properties and provide temporary aliases for -moz-transition and exposed subproperties. Bug 762302 - Unprefix CSS Anim…

Firefox (Nightly)で接頭辞なしのCSS TransformsとGradientsが実装

接頭辞なしのCSS TransformsとCSS GradientsがFirefox Nightlyに実装された。 745523 – [css3-transforms] Unprefix transforms 752187 – Drop prefix for gradients バグのタイトルにはunprefixやdrop prefixとあるけれど、今のところは接頭辞なしのバージ…

FlexboxがLCに: プロパティ名などもろもろ変更

タイトルの通りで、FlexboxのLCが公開。 [css3-flexbox] Going to Last Call CSS Flexible Box Layout Module (W3C Working Draft, 12 June 2012) LCは喜ばしいんだけど、なんせTabせんせやfantasaiせんせがEditorなので、政情不安定というか変なところで変…

Transitions, Transforms, Animationsの接頭辞が省けるようになった

昨晩というか今朝のCSS WG Teleconにて。 CSS WG Blog – Minutes and Resolutions Telecon 2012-06-06 [CSSWG] Minutes and Resolutions Telecon 2012-06-06 Resolved: Transitions, Transforms, and Animations may be released unprefixed. IE10PP6でなぜ…

CSS3 Image ValuesがCRに

「ようやくか」という声はぐっとこらえて。css3-imagesがついにCRに進むことが決まりましたよ。 CSS WG Blog – Minutes and Resolutions 2012-03-28 Resolved: Publish CSS3 Images as CR というわけでグラデーションの構文から接頭辞が消えますよと。 ただ…

Responsive imagesのための-webkit-image-set()

AppleがWebKitに-webkit-image-set()なるものを実装した。 Changeset 111637 – WebKit ― Implement image-set Bug 80322 – Implement image-set なにかというと、Retina displayやらPCとデバイスピクセル比が違うディスプレイに対して、違う画像を出し分ける…

-moz-border-radiusと-moz-box-shadowが削除された

Geckoから-moz-border-radiusと-moz-box-shadowのエイリアスが削除された。Firefox 13でこれらが無視されることになる。 Drop support for -moz-box-shadow and -moz-border-radius-* now that we've supported the unprefixed versions since Firefox 4. Bu…

GeckoでCSS3のbackground-positionがサポート (残すはWebKit)

「CSS3のbackground-position」というのがポイント。 mozilla-central: changeset 87254:f25d65f080f8 Bug 522607 - [css3-background] Accept background-position values like "bottom 10px right 10px" CSS3のbackground-positionでは、bottom 10px right…