WTF, HTML and CSS?
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. Created by @mdo. Contents Declare a doctype Box model math Rem units and Mobile Safari Floats first Floats and clearing Floats and computed height Floated are block level Vertical margins often collapse Styling table rows Firefox and <input> buttons Firefox
Beyond CSS Architecture
The document is a slideshow presentation about CSS architecture techniques. It discusses object-oriented CSS (OOCSS), block element modifier (BEM), CSS preprocessor extensions of BEM, responsive design patterns, style guide generators, specificity graphs, critical path CSS extraction, and the potential of web components. The presentation emphasizes building modular, reusable CSS components and est
GPUを活かせるCSSの工夫 - ワザノバ | wazanova
http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 Ariya Hidayatが、サイトパフォーマンスの改善のためにGPUをうまく活用するポイントについて紹介してくれています。 まず、期待できるGPUの効果は、ページのレンダリングを加速してくれること。 アニメーションのフレームごとにピクセルを描くのではなく、ブラウザはDOMエレメントのスナップショットを撮って、それをGPUテクスチャ（レイヤ）として保存。後で、GPUにそのテクスチャを変換させ、DOMエレメントをアニメーションしているように見せることができる。 渋滞している高速道路ではス
TeXの後継として、HTML5 & CSS組版〜Vivliostyleプロジェクト
はじめに 自己紹介 1990年ごろ、テキスト整形ツール「XTR」を開発しフリーソフトウェアとして公開。 それがきっかけで、組版とマークアップ言語（SGML～XML/HTML）、スタイルシート言語（XSL/CSS）に関心を持つ。 1999年、XML/CSS自動組版ソフトの開発を、アンテナハウスに企画提案。Antenna House Formatterとして製品化。 W3C CSS仕様とその実装に携わり、その関係で電子書籍フォーマットEPUB3（縦書き対応）の標準化にも関わった。 2014年8月、次世代CSS組版ツールを開発するため、株式会社ビブリオスタイルを設立（アンテナハウスが出資）。 CSS組版＝HTML(またはXML)+CSSで組版 組版とは、印刷の一工程で、文字や図版などの要素を配置し、紙面を構成すること。…… 画面上での編集を前提とした WYSIWYG の DTP に対し本来の組版
MediumのCSSはこの上なく最高！ | POSTD
自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。 それからどうなったって？ 違うことをやっていた？ 何てこと、どうやったら同じことができるかって？ やり方を教わりたいって？ これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。 始まり（これまでの道のり） だいたい2年ほど前、私はソフトウェアアプリケーション開発と（皆さんが読んでくれているといいのですが） medium.com に取り組むためにObvious Corp.に加わりました。 その時、Mediumは、すでに一連の”スタイル更新”を行っていました（ スタイル更新とは デザイナ
抽象化と組み合わせができるレイアウト言語があれば、CSSは必要ない | POSTD
Web上の視覚的なスタイルを指定するCSSは、あまりにも複雑で、恐らく今までに一度も正確に実装されたことはないだろう。それにもかかわらず、バージョンが上がるにつれて、その複雑さは増すばかりだ。一方で、CSSではできることが限られており、初歩的なデザインでさえ不可能であるか、あるいは法外に難しいことも少なくない。加えて状況依存的（または計算的）な側面を持つものは、すべて外部で対応しなければならないという有様だ。その結果、CSSに関するほとんどの手引きでは、希望する外観に何とか近づけたり、非互換性を回避したりするための頼りないハックに多くの労力が費やされている。 – Bret Victor 私は近年、クライアントサイドの開発技術を数多く見てきました。そして、その中でも特に興味深いと思ったのが Elm です。関数型のプログラミング言語としては、Elmはそれほどワクワクするようなものではありません
Centering in CSS: A Complete Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo
Full-height app layouts: A CSS trick to make it easier
Steve Sanderson's Blog
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
Bootstrap Blog
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a depre
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
Get on the CSS Grid | Blog | Chrome for Developers
When building a Web Application, one of the first things that's needed is a way to lay out the content of your app. Lots of designers use imaginary grids to lay out content, whether it's for a site or app. The CSS group has been working hard to make layouts easier, and as part of that have produced the CSS Grid Layout Module which is now emerging in browsers. This feature is available to try out i
More CSS Secrets: Another 10 things you may not know about CSS
background: linear-gradient(white 30%, hsla(0,0%,100%,0)), linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%), radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; background-attach
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
rebeccapurpleがCSS 4 colorに提案された経緯
Name #663399 "Becca Purple" in CSS4 Color? - Specifiction #663399を"Becca Purpule"としてCSS4 Colorに入れないか？ CSS colorに名前を追加する方法はわからないし、なにか目的に叶うものであるかどうかもわからないが、@meyerwebのCSSに対する貢献を明らかにするために、また標準化というのはそもそも社会的プロセスによって進められることを明らかにするために、#663399を"Becca Purple"と名付けないか？ これはいったいどういうことか。Beccaというのは、哀れにも六歳にして亡くなったEric Meyerの娘の名前なのだ。Eric MeyerはCSSの標準規格に尽力し、また、 Cascading Style Sheets: The Definitive Guideや、 Css Pock
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptやCSSもクロール対象に、Googleがウェブマスター向けガイド更新 
CSSやSVGで実装するローディングアニメーション - NxWorld
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
CSS3 box-shadowジェネレーター