Yesterday, I have written about the strange value of the CSS width when set with a percentage. One Japanese night later, Boris Zbarsky sent me a private email explaining how CSS widths are computed in Gecko. These short emails are a gem of pleasure to read and insights into Gecko. I should almost open a new category here called "Santa Boris". I love them. Thanks. So what did I learn with Boris? He
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
9 October 2013 Some web developers like to use reset style sheets, which are style sheets that set all properties back to some known value on all elements. Although this does somewhat work against the “cascading” part of CSS, developers find it useful to avoid differences that come from user agent style sheets in different browsers and on different platforms. Since reset style sheets explicitly li
It’s never been easier to share your digital photos on the web, thanks to modern smartphones and digital cameras. For web developers, however, dealing with user-generated digital images can be far from simple. A significant mismatch exists between the web, where the orientation of an image is determined by how its pixels are stored, and digital photography, which increasingly relies on metadata to
このページでは、対応している CSS の セレクター、プロパティ、@-規則、メディアクエリ、値をアルファベット順で掲載しています。 「対応開始」の列は、対応が開始された Gecko のバージョン番号を示します。 Gecko 1.0 以前のバージョンは、 1.0 として一覧表示されています。 Gecko は、Firefox やその他のアプリケーションで用いられているレンダリングエンジンです。Firefox 及び Gecko のバージョン番号に関しての詳細については Gecko のページを参照して下さい。 「仕様書」の列は、その行の項目が策定された仕様書（基本的には最新のものの一つ）にリンクしています。但し古い仕様へのリンクのままになっており修正の必要がある項目を含む可能性がある点に注意して下さい。 Mozilla CSS 拡張 (プロパティ名の先頭に-moz-接頭辞をもつもの) に関しては、
3 August 2012 Yesterday I landed support for the CSS @supports at-rule for Gecko (based in part on some earlier work done by former intern Vitor Menezes), and it should now be in Firefox Nightly builds. @supports is part of CSS Conditional Rules Module Level 3, and allows authors to condition rules based on whether particular property declarations are supported. For example, let’s say you want to
A previous draft is supported as -moz-border-image. A patch does exist which creates the border-image-* longhand properties and extend the shorthand syntax to make it match. Some Web sites does work now with both WebKit & Gecko, but are broken when we add the new final syntax (and remove -moz-border-image). border-image-repeat: space is not implemented (and of course its shorthand equivalent neith
WeakMap.set() メソッドの戻り値はそれ自身から undefined に替わりました。 Firefox 7 以降で正規表現のハンドリングに関する不具合がありましたが、修正されました。詳しくは Firefox バグ 683838 をご覧ください。 ECMAScript 5 strict mode (すなわち、"use strict;" 以降) では、E4X の構文を使用できなくなりました。 DOM3 Events DOM イベントの event.stopImmediatePropagation メソッドが実装されました。 マウスイベントの mouseenter および mouseleave が実装されました。 DOM4 DOM4 仕様書で非推奨とされたため、document.xmlVersion 属性 (読み取りのみ可能で、設定は不可) が削除されました。document.xmlV
CSS3 を使って鏡面反射の効果を付ける方法のメモ。 webkit 系のブラウザでは -webkit-box-reflect を使って簡単に効果を付けることができるが、Firefox4 や 5 などでは疑似要素とマスク用svgを使って少し手間をかけないとできない。 CSS3 を使った鏡面反射効果 サンプル css コード Firefox では、疑似要素 after を使って鏡面反射用要素を作り、mask を使ってフェードアウト効果を、-moz-transform を使って鏡面効果（反転）を付けている。 この疑似要素の背景に元の要素を -moz-element を使ってセットすることで鏡面反射の効果を作っている。 /* Firefox, webkit 共通の設定 */ body { background: black; } #reflect1 { width: 200px; padding:
I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed! input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; line-height: 50px; } In a perfect world, this code would
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsWhat is CSS?CSS getting startedChallenge: Biography pageBasic selectorsAttribute selectorsPseudo-classes and elementsCombinatorsBox modelHandling conflictsValues and unitsSizingBackgrounds and bordersOverflowImages, media, formsStyling tablesDebugging CSSChallenge: Business cardChallenge: Fancy letterheadChallenge: Fan
Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element This is a guest post by Markus Stange. Markus usually works on the Firefox Mac theme implementation, but this time he went on a small side trip through the Gecko layout engine in order to implement -moz-element. In Firefox Beta 4 we’re introducing a new extension to the CSS background-image property: the ability to draw arbitra
This is a re-post from David Baron’s blog. This feature has landed in Mozilla Central (trunk) and only available with a Firefox Nightly Build for the time being. Last night I landed support for :-moz-any() selector grouping. This allows providing alternatives between combinators, rather than having to repeat the entire selector for once piece that’s different. For example, it allowed replacing thi
This article was writt by Anthony Ricaud, French OpenWeb enthusiast. Why you need classList A dynamic web application usually needs visual feedback from its inner mechanism or needs to display different visual elements based on users’ actions. To change the user interface easily, you can add/remove/edit elements through the DOM API (document.createElement, div.removeChild, elt.style.color, …) but
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 カスケードと継承 CSS セレクター ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボックス テキストの装飾 テキストの装飾の概要 基本的なテキストとフォントの装飾 リストの装飾 リンクの装飾 ウェブフォント 評価課題: コミュニティスクールのホームページの組版 CSS レイアウト CSS レイアウトの概要 CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く