SafariのUA文字列が固定されて固定されなくなったおはなし - fragmentary
Jxckが以前、SafariのUA文字列が固定されたというのを書いていた。 Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io Safari Technology Preview 46で入った変更だ。 Release Notes for Safari Technology Preview 46 | WebKit Froze the user-agent string to reduce web compatibility risk and to prevent its use for fingerprinting TwitterでもAppleのRicky Mondelloがそれを伝えていて、ちょっと騒ぎになっていた。「それは困る」的な反応が結構多かったのと、中には「やっぱりSafariは新たなIE6だ」み
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
Progressive Web Appsとは - fragmentary
Chrome Dev Summitに来ている。 今年のChrome Dev Summitは日ごとにテーマが分かれていて、初日がProgressive Web Apps、2日目がRAILらしい。RAILはGooglerがちまちまと話してるけど、前者についてはまだそんな離されてない気がする。 というわけでセッション聞きながらなんとなく書いてみよう（なのでセッションまとめではないよ）。 アプリに「なっていく」「Web」 Progressive Web Appsは、Alex Russell先生が6月にブログで提唱して、そこからプロモートしているもの。“progressive”を訳すと「漸進的」やら「進行性」とかになるけれど、そのまま訳すより「アプリになっていくWeb」と砕いて解釈するとわかりやすそう。 アプリに「なっていく」とは何かなんだけど、Webアプリが「使ってるうちにネイティブアプリと同じよ
すこし開かれたWHATWG HTML - fragmentary
8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。 [whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08-27) 体制も少し変わって、HixieがひとりでやっていたHTML仕様の作業にAnneやDomenicなども直接関わるようになった。Issuesでの議論やPull Requestの受け付けも始まり、だいぶモダンな策定環境になった。 これまでのWHATWG HTMLとHTML5仕様書 これまでのWHATWG HTMLは長らくSubversionサーバで運用されていた（もしかするとCVS時代もあったかも）。 HTML仕様書は基本的に1枚のHTMLファイルに書かれていて、それをツールで切り出しmultipage版やPDF版、Web Developer Editionなどを生成していた（あ、<p
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
all, initial, unsetでCSSのリセットと継承回避をする - fragmentary
追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset）。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のものです。 すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介しようかと。 CSS Cascading & Inheritanceのall, initial, unset Firefox 27あたりからallプロパティとunset値なんてものが実装されました。CSSのCascading and Inheritanceモジュールで定義
Sassでlinear-gradient()のmixinをつくる その6 - fragmentary
このエントリはCSS Preprocessor Advent Calendar 2012の記事の続編です。 察せ。 Sass 3.3がついにリリースされました。リリースされないものだと思っていましたがよかったです。 アルファ版からインストールしていましたが、いまいち使っていませんでした。というわけで、これまで作ったMixinからSass 3.3の新機能を実際に使えないか試してみます。 Part 8: マップライクな処理はマップに置換え linear-gradient()と-webkit-linear-gradient()など接頭辞つきのバージョンとでは方向を示すキーワードが違います。対応関係があるためマップやハッシュで表現したいところですが、これまでのSassにはそういったものがなく、Sass 3.2の次に実装するとされていました。 そしてSass 3.3でついにマップが実装されました。わ
Chromium DashboardのCSS usage metricsとぼくらのusage metrics - fragmentary
火曜にGoogle JapanであったChrome Tech Talk Night #6でライトニングトークをしてきた。 イベント中ずっと資料とコードを書いてて内容をほとんど聞いてないという残念っぷり…こういうのやめたいね。 Chromium Dashboardの概要と、9月に追加されたCSS metricsの紹介と、自分がアクセスしたページならchrome://histogramsからデータとってこれるよという話をした。 資料はこちら。 Chromium Dashboard 以下ちょっといろいろ。 CSS usage metricsで気になるところ すこしある。 Chromeが解釈できる機能に限定されること 現在のところプロパティのみということ （たぶん）プロパティの「書かれた回数」をもとにしてないこと ひとつ目は他のベンダー接頭辞つきプロパティの利用状況がわからないこと。たとえば-mo
Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentary
以前CSS-Tricksの記事で知ったAutoprefixerというの、ようやく試してみた。 ai/autoprefixer Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks CSS-Tricksの記事読んだほうがいいと思うけど、月一のブログ更新ノルマのためここでも書いとく。 かしこい「ポスト」プロセッサ Autoprefixerはその名前からある程度想像できる通り、ベンダー接頭辞を自動的につけたりしてくれるユーティリティ。CSSファイルを作るのではなく、CSSファイルを処理するので、ポストプロセッサと言っている。 接頭辞まわりは、すでにCompassとかのライブラリでmixinなどが用意されてるので、べつに必要ないじゃんと思うかもしれない
新しいSafariについて予想する - fragmentary
追記 (2013-08-13): WWDCでの発表にて、いくつか予想が外れたのが分かったので、短い答え合わせのエントリを書いた。あわせてSafariに懸念していることも書いたので、それもどうぞ。 Safari 7予想：答え合わせなど Safariでせつなくならないために何かしたい 以下は元記事。 WWDCが近いので新しいSafariの予想をしようかと。 来週まで待って確定的な情報を書いてもよかったけど、まあいいや。 たぶん7月に出る 新しいバージョンが「Safari 7」になるのかわかんないから、Apple風に「新しいSafari」と書くね。 ここ2回のメジャーバージョン（5.1, 6.0）は、7月下旬にリリースされている。なので今回も、WWDCでお披露目＋Developer Previewのリリース、7月の同時期に正式版リリースされると予想。 ここ1, 2ヶ月のWebKitでのApple
BlinkなChromeのExperimental Features - fragmentary
3月にChromeのExperimental WebKit/JavaScript Featuresというのを書いたらGoogle+でけっこうな反響があった。BlinkのFAQからも間接的に参照されてたりしている。ただ件のエントリを書いたのはChromeがまだWebKitを使っていたとき。その後Blinkになり、ランタイムフラグの重要性が増し、コードもちょっと変わったので、アップデートを。 RuntimeEnabledFeatures.inにまとまり始める 試験実装は基本的にコンパイルタイムフラグではなくランタイムフラグを使う方針というのは、Blinkの紹介で書いた。その時はcontent/renderer/render_thread_impl.ccとcontent/browser/web_contents/web_contents_impl.ccという2ファイルから探さないといけなかったの
モバイル系ブラウザのUA文字列 - fragmentary
何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違
Firefox Nightly (22) に ES6のArrow Function来たる - fragmentary
そもそもES6に入ってるのも知らなかったので、2日前にmozilla-inboundにチェックインされててだいぶ驚いた。 で、Nightlyに入るのを待つこと2日弱、ようやく入ったので試してみた。 おお動く。そしてこのJavaScript書いてない感がすごい。 thisがレキシカルにboundされるようなのでイベントリスナとかで楽そうだー。 追記 (2013-03-21) こんなのよりもっとずっと詳しく丁寧な解説が公開されたのでそちらをどうぞ！ Firefox 22(Nightly) で ArrowFunction が実装されたが、扱いが難しい - hogehoge @teramako
ChromeのExperimental WebKit/JavaScript Features - fragmentary
追記（2018年4月16日）：現在はWebKitではなくBlinkになったため“Experimental Web Platform features”というセクションになっている。さらにはもっと簡単に、runtime_enabled_features.json5というファイルを見ればどんな機能があるのかがわかるようになっている。 chrome://flagsにはいろんなランタイムフラグがある。CSS ShadersやらVP9 playbackやら、実験中の機能を有効にできるようになっている（動くかどうかはしらない）。 その中にこんなフラグがある。 Enable experimental WebKit features. Enable experimental WebKit features that are in development. Enable Experimental JavaS
HTML WG Status Report (TPAC 2012) - fragmentary
TPACへ行けず意気消沈している。 それはそれとして、3人のco-chairの連名でAdvisory Committee向けに出したスライドが公開されていた。 HTML WG status report to Lyon AC meeting (PDF) HTML WG Status Report Status Reportでそんな新しい話はなかった。HTML 5.0 CRとHTML 5.1 FPWDを4Q中に出すというプランは変わらず。ただ、5.0 CRに至ってはもうCRドラフトが作られ始めている。 CR drafts are up CR drafts for review あ、CRのドラフトが11/8付になってるけど、そんな早くはでないはず。 At risk for 5.0 CRになると実装を考えないといけない。HTML5の場合、実装が進んでいるものもあればそうでないものもあって、そうで
Plan 2014 ― HTML 5.1とか拡張仕様とか - fragmentary
ひゃっ、HTML 5.1ときましたか。 Getting HTML5 to Recommendation in 2014 - W3C Blog Getting HTML5 to Recommendation in 2014 2014年に勧告するためにはどうすればいいかあれこれ考えて、「HTML 5.0を2014年に、HTML 5.1を2016年にそれぞれ勧告する」という計画が提案されたと。まだ提案段階なので、決定事項ではない。 Plan 2014 要約はChairのひとがしてくれている。こんな感じかな。 Charterを改定して、HTML 5.0を2014Q4に、HTML 5.1を2016Q4に勧告するということを書く CR exit criteriaに沿って、テストが必要だと思われる機能のテストに集中する 他との折衝も考えつつモジュールの考え方を導入し、仕様の大きさと複雑さを抑える さて、
接頭辞外しと-webkit-サポート - fragmentary
もう書くのだるいんだけど、またまたベンダー接頭辞的なおはなし。 Opera 12.50では標準と-webkit-のみ (-o-さよなら) 今月に入って、Opera 12.50で使われるPrestoのバージョンが2.12になった。 まず3日のsnapshotでは、接頭辞なしのTransitions, 2D Transforms, Animationsのサポートが行われ、さらに接頭辞付きの実装が削除された。 Opera Desktop Team - 12.50 Summer Core Update Opera Developer News - A hot Opera 12.50 summer-time snapshot 続いて10日のsnapshotで、接頭辞なしのグラデーションもサポートされ、3日のと同じように接頭辞付きの実装が削除された。 Opera Desktop Team - More
外部のCSSを参照したSVGは思うように参照できるか - fragmentary
おおおお、なるほどー！ HTML -> CSS -> SVG -> CSS - Weblog - hail2u.net ただやっぱり、CSSの外部参照は厳しそうですね。 SVGから外部スタイルシートを参照するその他の方法 SVGから外部CSSを読み込む方法としては、記事にあるxml-stylesheet PIを使う他に、SVGの<style>要素を使うという手がある。SVGでCSS使う際にも @import が使えるので、そこから参照してやればよい。あ、XMLだから要素の内容はちゃんとCDATAセクションで囲ってね。 <style><![CDATA[ @import url(external.css); ]]></style> <svg:style>を使ったSVGファイルを直接開いたら、PIの例と同じようにChrome (dev), Firefox (beta), Opera (Next)
WebKitではGeolocation APIがキャッシュをブロックするらしい - fragmentary
IE9ではnavigator.geolocationのチェックでメモリリークするらしいという話を書いたけれど、WebKitではページのキャッシュをブロックするらしい。なんと… またまたModernizrから。 Pull Request #551: Avoid activating geolocation in WebKit by josh · Modernizr/Modernizr Accessing geolocation activates the geolocation service which currently blocks page caching. Checking for the geolocation property avoids this. https://bugs.webkit.org/show_bug.cgi?id=43956 ただ回避策があって、geoloca
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
