特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE,　Edge,　FireFox,　Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png;　(画像赤罫線で囲った箇所)　をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx

✨実験用の小さなコードを公開するのに、jsfiddleはとても便利ですよね。 📄vueは、単一ファイルコンポーネント（SFC)の仕組みがとても気に入っています。 この２つを組み合わせたものが欲しくて、VueFiddleなるものを密かに開発を進めています。 About VueFiddle WIP vueに特化したオンラインIDE 単一ファイルコンポーネントの記述対応 templateは HTML / PUG　対応 styleは　CSS / LESS 対応 scriptは javascript / TypeScript 対応 URLシェアに対応 サポートブラウザ(PC版 Chrome/Firefox) Usage 基本的には、jsfiddleと似せています。 左上のtemplate(HTML)パネルに、templateを記述し、 左下のscript(JAVASCRIPT)パネルに、scrip

Since #488 is closed, I thought I'd open up a new issue to discuss a relatively specific proposal I have for Scoped Custom Element Registries. Scoped Custom Element Definitions Overview Scoped Custom Element definitions is an oft-requested feature of Web Components. The global registry is a possible source of name collisions that may arise from coincidence, or from an app trying to define multiple

書こうと思ってだいぶ月日が流れてしまったけどメモ。 Firefox52でCSS Text Module Level3の区分分断の変換規則が実装された。原文でいうとSegment Break Transformation Rulesというやつ。 こういう表示をしようとして、HTMLを書いたとき <p> 庭には 二羽 にわとりがいる。 </p> 要素の中で改行すると、ブラウザの表示では改行の箇所にスペースが挿入されてしまう。 こんな感じに。 これが、例えば英語で <p> The quick brown fox jumped over the lazy dogs. </p> としたときには the のあとの改行の箇所にスペースが入らない場合、改行の前後の the と lazy がくっついて The quick brown fox jumped over thelazy dogs. となってしまう

ある要素にカスタム・プロパティーを使って背景色を指定したとする。そしてその要素に擬似要素を追加する。その擬似要素で背景色を指定すると、要素の背景色が初期化されてしまう。というバグがEdge 15にあった。 View Demo: Background Color Disappearance on Edge 15 デモは変数を定義し、参照するだけの簡単なCSSだ。しかしEdge 15でおかしくなる。Chrome 58やFirefox 53、Mobile Safari 10.3.2、そしてChrome 61やFirefox 55では問題ない。 カスタム・プロパティーの定義済み変数が参照できず、不明な値として初期値が採用されているように見える。擬似要素が追加されることで変数のスコープが壊れているような印象だ。 報告はした……。Edge 15でカスタム・プロパティーのバグがひと通り直るまでは長そうだ

マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。 描画パフォーマンスが上がった（Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps）。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間

The W3C validator (Wikipedia) shows a warning for self-closing tags (those that end with “/>”) on non-void elements. (Void elements are those that may not ever contain any content.) Are they still valid in HTML5? Some examples of accepted void elements: <br /> <img src="" /> <input type="text" name="username" /> Some examples of rejected non-void elements: <div id="myDiv" /> <span id="mySpan" /> <

HTML Reference is free and always will be! Please whitelist us in your ad blocker. Thank you! A free guide to HTML Learn by example: htmlreference.io is a free guide to HTML. It features all elements and attributes.

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ

開発者間の議論の結果、Firefox とその他のブラウザーは、URL.createObjectURL 静的メソッドのオブジェクト引数に MediaStream を受け入れることを近々中止することになりました。Firefox 54 では、そのようなコードが見つかった場合、コンソールに廃止予定の警告が表示されます。 仕様に書かれている例 が示す通り、<video> あるいは <audio> 要素上に MediaStream を設定するには、HTMLMediaElement.prototype.srcObject プロパティを使ってください。