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

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

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

サイボウズ採用情報のアニメーションがするするしてないので調べた件、SafariやFirefoxでも見てみたりもした。

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

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

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

サイボウズの採用情報ページのアニメーションがするするしていなかったので、Chrome DevToolsを使って何が起こってるのか調べてみた。

するするさせたい

昨年くらいからWebの描画まわりのパフォーマンスについて調べたりしている。何をしたいのかと言うと、するするさせたい。 するする? あくまで自分の傾向なんだけど、読み込まれるまで時間がかかるというよりは、ページのスクロールでひっかかりがあったり、…

Progressive Web Appsとは

Chrome Dev Summitに来ている。 今年のChrome Dev Summitは日ごとにテーマが分かれていて、初日がProgressive Web Apps、2日目がRAILらしい。RAILはGooglerがちまちまと話してるけど、前者についてはまだそんな離されてない気がする。 というわけでセッショ…

すこし開かれたWHATWG HTML

WHATWG HTMLの策定がGitHubに移ったことを受けてHTMLの今後を考える。

Content ScriptsなChrome拡張をFirefox拡張に

追記(2015-10-16):WebExtensionsの発表 これを書いた数ヶ月後の8月21日、Mozillaが今後のアドオンをWebExtensionsというChrome拡張APIベースなものに移行していく計画を発表した。 The Future of Developing Firefox Add-ons | Mozilla Add-ons Blog WebE…

FirefoxのCSS Unprefixing Service

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

SassScriptでリスト関数を拡張する

その昔Sassに凝っていたころに書いたメモを見つけた。供養のために公開。 当時のSassにはセパレータ判別の関数とかなかったので、今は特に必要ないものもあるね。時間経ったね。 グラデーションのmixinを書いたときに「リストを扱う関数が足りないなあ」と思…

Android Wearを半年使ってみたので雑感

Google I/OでLG G Watchを手に入れてから半年、Android Wearの感想を改めて。使って1ヶ月後に書いたGoogle+の投稿と変わらないところもあるけど。 腕時計を再発見する LG G Watchを手に入れるまで、10年くらい腕時計をしていなかった。ケータイもあったし、…

Firefoxおめでとう&みんな開発版つかおうよ

Firefox 1.0のリリースから10年経った。おめでとうございます。 リリース前のことだけど、WikipediaのFirefoxの記事をちょこちょこいじっていて、FirebirdからFirefoxに名前が変わった件について「Firebirdプロジェクト側から攻撃を受け〜」というふうな感じ…

<picture>まわり雑感 その1

Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ:ユースケースと入門用のコードサ</picture>…

<script async>でJavaScriptの非同期読み込みを

JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-i…

-webkit-alt プロパティ

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

meta-contactを使わずに連絡先をマークアップできないか

blink-devにこんなメッセージが。 Intent to implement: 'contact' meta extension Contact Meta Extensions たとえばおさいふ落とした時に銀行やカード会社に連絡とかしづらいから、電話番号、メールアドレス、住所を <meta name="contact"> なるものにぶっこんで、緊急な際にそ</meta>…

ServiceWorkerの記事を書いた&所感

HTML5 Experts.jpにServiceWorkerの記事を書いた。 Google I/O 2014──ServiceWorkerでネイティブアプリとの差を縮めよう Google I/Oで見たServiceWorkerのセッションを紹介したもの。セッションの内容を文字にして説明しているという雑な記事。セッションの…

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

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

Safari 8?の機能予想

WWDC直前ということでSafariの話題を。 といってもネタは3週間以上も前のもの。5月8日に「safari-538.34-branch」というWebKitのブランチが切られた。 Changeset 168485 – WebKit — New Branch 昨年も書いたのだけど、これまでの動きから考えてこれが次のSaf…

新しいiPhoneの解像度とCSSピクセル幅を考える

そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。 新iPhoneの画面解像度は? まず、確かな情報筋()によると、4.7インチと5.5インチのモデルが出ると。 4…

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

CSS

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

WOFF 2.0 Evaluation ReportとBrotli

W3C

いつだったかにWOFF2のことを書いた。 WebFonts WGのrecharter: より高い圧縮率を備えたWOFF 2.0の検討 タイトルかたいな! その後どうなったのかなと思いつつもめんどくて調べてなかったんだけど、1月末にWOFF 2.0 Evaluation Reportというのが出た。WOFF2…

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

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

Web技術について書くときの媒体の違いを考える

このエントリはEditors' & Writers' Advent Calendar 2013の12日目のやつです。 これまでいろんな媒体で、HTMLやらCSSやらに関することを書いて、そして書かせていただいてるので、媒体ごとの違いなどを考えてみました。 ブログ このweblogや過去に書いてい…

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

CSS

このエントリはCSS Property Advent Calendar 2013の10日目のものです。すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介…

WebプラットフォームのこれからとExtensible Web

この記事はFrontrend Advent Calendar 2013の8日目の記事です。 昨日岐阜県にてHTML5 Conference 2013 in Gifuというイベントがありまして、そちらでWebプラットフォーム動向についてお話させていただきました。スライドはこちら。 2013年のWebプラットフォ…

SVGヤバイ 2013冬

Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。 (@156422) - b87d44f — Allow SVG images to not taint the canvas with drawImage/drawPattern WebKitのパッチをマージしたものらしい。ちょっと…

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の記事読んだほうがいいと思うけど、月一の…

Shareいろいろ

思いつくままに書いてたらほぼWeb関係なくなった……まいっか。 Firefox for AndroidのShareメニュー Firefox 24 for Android (現在Beta) で、メニューの“Share”アイテムの横に、頻繁にシェアする先が並んで出るようになった。 Share Quickly これ便利。これま…

Webはlossy+alphaを手に入れられるのか

Chrome Canary(今のところM30)でアルファチャネル付きWebMが実験的にサポートされたとのこと。 Alpha transparency in Chrome video ビデオ見ると妙な気味悪さがあって面白い。ドラッグ&ドロップしたり背景変えたりね。静止画だとふつうにできてたことが…

Safariでせつなくならないために何かしたい

Safariについて言いたかったことを言えてなかったので、もう一本だけ。 ひとことで言うと、「バグ見つけたら報告して、5月までに直してもらおう」と。 5月を逃すとせつない なんでSafariに気をかけてるかというと、モバイル端末での影響力(シェア)が大きい…

Safari 7予想:答え合わせなど

WWDCのキーノートから1週間弱。発表・リークしたSafariの情報と、予想したものはどれくらい違うか、あらためてまとめたり、また予想したり。 バージョンはSafari 7.0、7月には出ない OS X Mavericksのページ下部の脚注に“Safari 7.0”とあるので、バージョン…

新しいSafariについて予想する

追記 (2013-08-13): WWDCでの発表にて、いくつか予想が外れたのが分かったので、短い答え合わせのエントリを書いた。あわせてSafariに懸念していることも書いたので、それもどうぞ。 Safari 7予想:答え合わせなど Safariでせつなくならないために何かしたい…

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

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

BlinkなChromeのExperimental Features

3月にChromeのExperimental WebKit/JavaScript Featuresというのを書いたらGoogle+でけっこうな反響があった。BlinkのFAQからも間接的に参照されてたりしている。ただ件のエントリを書いたのはChromeがまだWebKitを使っていたとき。その後Blinkになり、ラン…

機能の利用度合いを測るUseCounter (FeatureObserver)

WebKit絡みの話が続く…… 接頭辞のついた実装、レガシーな機能を削除したいときに「それらに依存したコンテンツに影響する」というのが懸念される。こういった理由もあって、WebKitでは接頭辞付きの機能は、接頭辞なしの機能が実装されても基本的に保持されて…

さよなら -apple- に -khtml-

3月半ばに書いてそのままになってた下書きを発見。なんで放置してたんだっけ……引用多すぎるからかな。まあいい。 WebKitにこんな変更が加わった。 Changeset 146025 – WebKit ― Legacy CSS vendor prefixes should only work for Dashboard 先日Paulが公開し…

Chromeの新エンジンBlink ― どうなるんだろう篇

なぜなに篇とWebプラットフォーム篇ではBlinkに至った背景や、Blinkの互換性への取り組みについてだーっと書いた。 今回はBlinkの登場が何にどんな影響を与えるか、だらだら考えてみる。 Chrome すでに色々書いてはいるけれど。 WebKitから離れ、Chrome専用…

Chromeの新エンジンBlink ― Webプラットフォーム篇

よいサブタイトルが思いつかなかった。Blinkでは、HTMLとかCSSとかDOMなどへの機能追加について、互換性、オープン標準、透明性を重視したガイドラインが設けられ、それが強くアピールされている。 Throughout this transition, we’ll collaborate closely w…

Chromeの新エンジンBlink ― なぜなに篇

4月3日、GoogleがChromeに使っていたWebKitをフォークした新しいエンジンBlinkを発表した。 …だいぶ出遅れたのでとても書きづらいけれど、自分の理解のために書く。ただいろいろあるので、まずはWebKitをフォークするに至った経緯と、Blinkの概要について。 …

リークしたIE11の情報からいろいろ邪推する

Windows Blueのビルドがリークしたらしく、それに搭載されるIE11の情報がちょこちょこと出始めている。 UA文字列が変わるらしい UA文字列を大幅に変えてくるらしい。 IE11 to appear as Firefox to avoid legacy IE CSS リークしたWindows Blueのビルドに搭…

Meaningless ― Web semanticsの観測

W3CのTAGメンバーにもなったGoogleのAlex Russelが、Webサイトで使われている要素、ARIA roles/states, microformats, schema.orgの型などを調べてまとめるためのChrome拡張をつくった。 Meaningless: towards a real-world web semantics observatory Chrom…

モバイル系ブラウザのUA文字列

何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので…

Firefox Nightly (22) に ES6のArrow Function来たる

そもそもES6に入ってるのも知らなかったので、2日前にmozilla-inboundにチェックインされててだいぶ驚いた。 で、Nightlyに入るのを待つこと2日弱、ようやく入ったので試してみた。 おお動く。そしてこのJavaScript書いてない感がすごい。 thisがレキシカル…

ChromeのExperimental WebKit/JavaScript Features

chrome://flagsにはいろんなランタイムフラグがある。CSS ShadersやらVP9 playbackやら、実験中の機能を有効にできるようになっている(動くかどうかはしらない)。 その中にこんなフラグがある。 Enable experimental WebKit features. Enable experimental…

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…

WebKit for Developers (by Paul Irish) を訳した

PaulがWebKitのportとかについてポストしていた。 WebKit for Developers - Paul Irish ちょっと書きたいことがあってアイデアまとめてるところにタイムリーなエントリーが!というわけで訳した。 開発者のための WebKit portやビルドフラグ、ランタイムフラ…

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

CSS

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

OperaのWebKit移行

各所で既報だろうけれど、OperaがWebKitへの移行を発表した。 Opera gears up at 300 million users 300 million users and move to WebKit WebKitベースのモバイルブラウザを発表という噂があって、ああモバイルだけかと思ったら全部だと。驚いた。そりゃ去…