CSS ショートハンド・プロパティの問題点
CSS のショートハンド・プロパティは複数のプロパティを一括して宣言できますが、メンテナンスしづらくなったり、思わぬバグの原因になったりすることがあります。そしてその問題が見えにくいことがさらに面倒です。font プロパティ を例に、実際にどのような弊害があるのか検討してみます。 html { font: 87.5%/1.5 "Georgia", serif; } このショートハンドは一見すると次の 3 つのプロパティをひとまとめにしたものに見えます。 html { font-size: 87.5%; line-height: 1.5; font-family: "Georgia", serif; } しかし、font プロパティは上記のほか font-style、font-variant、font-weight プロパティも指定でき、そして省略されたプロパティには初期値が割り当てられます
Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開
一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。 オプション解説 以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。 なお、''は改行も空白も入れないことを意味しますので注意して下さい。 decl.before 型 String 初期値 なし CSSプロパティ名の
カーゴ・カルトCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
Don't use flexbox for overall page layout
Posted 05 February 2014 only 5 months after the previous post When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn't really work. Why? Well, take my hand and follow me into the next section… Update: Don't let this post scare you off flex
mozilla-central: changeset 159842:4204ff8d0234 — Bug 926014 - Support CSS source maps
--- a/browser/app/profile/firefox.js +++ b/browser/app/profile/firefox.js @@ -1150,17 +1150,17 @@ pref("devtools.tilt.outro_transition", t // The maximum number of recently-opened files stored. // Setting this preference to 0 will not clear any recent files, but rather hide // the 'Open Recent'-menu. pref("devtools.scratchpad.recentFilesMax", 10); // Enable the Style Editor. pref("devtools.styleed
ベンダー拡張プリフィックスヲ削減セヨ
Translation of: Cutting down on vendor prefixes とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。 以下の例ではどのプレフィックスを、使用しているのなら、使用しているかの注釈をつけておきました。だいたいが削除でき1行で済ませられるにも関わらず、様々なベンダー拡張プリフィックスと共に使われてしまっていることが多いC
さよなら -apple- に -khtml- - fragmentary
3月半ばに書いてそのままになってた下書きを発見。 なんで放置してたんだっけ……引用多すぎるからかな。まあいい。 WebKitにこんな変更が加わった。 Changeset 146025 – WebKit ― Legacy CSS vendor prefixes should only work for Dashboard 先日Paulが公開した “WebKit for Developers” （日本語訳）を読んだHacker Newsの読者があることに気がついた。 "CSS parsing is the same, though. Slurping up your CSS and turning it into CSSOM’s pretty standard. Yeah, though Chrome accepts just the -webkit- prefix whereas Apple
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
Emmet v1.0 is out
February 24th, 2013 I’m happy to announce that after more than six months of development the Emmet (formerly Zen Coding) v1.0 is officially released. Maybe you’ve already been using Emmet for months, but only now, after numerous bug fixes and improvements, I can say that it works as expected. What has been changed since the Zen Coding? At first, the project name has been changed. “Emmet” is gonna
[css3-syntax] Parser rewritten as recursive-descent, review requested from Tab Atkins Jr. on 2013-02-12 (www-style@w3.org from February 2013)
[css3-syntax] Parser rewritten as recursive-descent, review requested From: Tab Atkins Jr. <jackalmage@gmail.com> Date: Tue, 12 Feb 2013 12:41:35 -0800 To: www-style list <www-style@w3.org> Message-ID: <CAAWBYDBsKaXy47ia_23fYZLHJKrNK5kyx-0E1EjL7T9JrZwKhA@mail.gmail.com> Per discussion at the last f2f, I've rewritten the parser section of Syntax to be a recursive-descent parser instead of a state m
Open Web Platform Weekly Summary - 2013-02-11 - 2013-02-18
Another release of the weekly Openweb Platform Summary from February 11 to 18, 2013. This is a short one. You can read again last week version. Your comments are helpful. CSS Custom Filters and CSS Shaders in SVG WG CSS has a draft specification on how to apply effects to an element before rendering it. It allows for custom filters effects which is basically an extension point. The SVG Working Gro
Web Animations
FXTF F2F Hamburg 2012 Brian Birtles Shane Stephens Rik Cabanier Alex Danilo Tab Atkins Dmitry Baranovskiy Vincent Hardy Overview Provide a common foundation for CSS and SVG animation Provide a high quality script API for animation and synchronization Easily create sophisticated frame-rate independent animations Amenable to hardware acceleration Provide a single target for future animation w
Stacking changes coming to position:fixed elements | Blog | Chrome for Developers
In Chrome 22 the layout behavior of position:fixed elements is slightly different than previous versions. All position:fixed elements now form new stacking contexts. This will change the stacking order of some pages, which has the potential to break page layouts. The new behavior matches the behavior of WebKit browsers on mobile devices (iOS Safari and Chrome for Android). Stacking Whats? Everyone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
will-change - CSS: Cascading Style Sheets | MDN
Blogger
CSS WG Blog – CSS Ruby Level 1 Published
WordPress › Error
Intent to Ship: Long Task API - Google Groups
Trouble Ahead For SVG Stacks (Maybe)
WordPress › Error