AppleがmacOSのシステムアピアランスに合わせてWebサイトのCSSを変更できる「Dark Mode CSS」をサポートした「Safari Technology Preview 68」をリリースしています。詳細は以下から。 AppleおよびWebKitチームは現地時間2018年10月24日、macOS 10.14 MojaveやiOS 12の次期アップデートに同梱される「Safari v12.1」で採用予定の機能を搭載したプレビュー版Safari「Safari Technology Preview(以下STP) v68」をHigh SierraとMojave向けにリリースしたと発表しています。 Oct 24, 2018 by Jon Davis @jonathandavis Safari Technology Preview Release 68 is now available f
Deep dive CSS: font metrics, line-height and vertical-align published 8 years, 10 months ago (February 2017) Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature
以前、Sassの変数（Map）とmixinでメディアクエリを管理する記事を書きました。 Sassの変数とmixinで変更に強いメディアクエリをつくる 単純なmixinで導入はしやすいですが、min-widthとmax-widthのどちらも使いたい場合は変数とmixinを増やす必要があったり、@media (min-width: 768px) and (max-width: 1023px)のような条件には対応していませんでした。 「Sass MQ」はこれらの機能を備えている高機能で軽量なライブラリです。 「inuitcss」で採用されていたり、「Sass Guidelines」で紹介されていたりしています。GitHubで1578のスターも付けられています（記事執筆時点）。 Sass MQをインストールする npm・yarn・Bowerからインストールできます。 bower install s
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
CSSの書き方が昔風になりつつある。SassにもPostCSSにも依存しない書き方だ。その上で、あってもなくても良い処理を、また別の安定した独立ツールに任せるようにした。その独立ツールとしてはClean CSSが優秀なので、これに任せてあとは気にしない。 もちろんこのウェブサイトのCSSのような小さな規模での話で、規模が大きいならどちらかは使う。小さな規模では、多くの環境でそのまま動くように書く。大きな規模では、その状態になるようにSassやPostCSSを使って書く。 SassやPostCSSだけでどうにかしようとすると、ともすればコードが奇抜なCSSのような何かになりがちだ。日常的にそうした環境に浸かっていると、普通のCSSが書けなくなるどころか、読めなくなる。CSSのデバッグ環境が開発者ツールにまだ依存している現在、読めなくなるのはかなりまずい。 小さな規模では、普通のCSSとして書
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。 このブログでは場所によって半角スペースを入れたり入れなかったりしていますが（2020年1月追記：現在は入れていません）、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。 そこで「それCSSでできるよ」と言える（ようになるかもしれない）プロパティを紹介してみます。 これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。 text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。 統合に
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多分そういうルールに則ってる」という話を聞いた。なるほど良さそうと思ったものの、細かい数字になってくると計算がめんどくさそう。 Rhythmic Sizingを利用できれば、それはかなり簡単に実現できる。要素のサイズやline-heightの値を、必ず指定した数値の倍数になるようにできるというやつだ。以下はline-heightを4pxの倍数にする例。 html { line-height-step: 4px; } .text { font-size: 1rem; // 16px line-he
せっかくのスマホサイト、高解像度デバイスで見たらロゴや見出し画像が粗くて残念。 なんてことはよくある話。というわけでロゴだけでもSVGでスマートフォン対応しましょう！ ロゴはSVGで使いまわそう。 サイト内で複数回の使用が想定されるロゴ画像は、いちいちサイズ別に画像を用意するのは面倒です。 ひとつベクターデータのSVGロゴを用意しておけば、使いまわせますし何より高解像度デバイスにも対応できます。 参考：各ブラウザの対応状況 http://caniuse.com/#search=SVG SVGとは？ SVG（エスブイジー）【 Scalable Vector Graphics 】とは、ベクター形式の画像フォーマット／画像記述言語です。ベクター形式なので、画像品質を維持したまま拡大縮小を行うことができます。そのため高品質なグラフィックでも、ファイルサイズが小さいのが特徴です。JPEGやPNGデー
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
