「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳
Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題？ まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開
ブラウザはCSSのセレクタを右から読む、ほんまか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、 ブラウザ君「ワイはCSSのセレクタを右から読むんや」 という記事を読みまして、ちょっと気になったので後で確かめようと思っていたのですが、なんとなくそのままになってしまいやや旬を逃した感がありつつ、ツッコミを入れてみようと思います。 なお『ワイ「ほげほげ」』みたいな形式は使いません1。恥ずかしいので。 私は仕事でChromiumのソースコードをよく読んでいるので、ChromiumのソースコードからCSSの処理を見つけて、それを基準にして解説しようと思います2。そのため、他のブラウザのレンダリングエンジンと異なる最適化が施されている
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
svgの印刷結果をクロスブラウザ化する
svgはxml記述で自由にグラフィックを描くことが出来る上，今日ほとんどのwebブラウザで表示・印刷することが可能であるなど，使い勝手が良いのが魅力です． そこで，レポート用紙などの用紙テンプレートをsvgで作ることを考えてみました．一般のテンプレートファイルはオフィスアプリケーションで作られていたりpdfで配布されているため，専用のツールを利用する必要があります．これをsvgで作っておけば環境を選ばずに出力可能となるためより利便性が高まるはずです． しかし実際に試してみるとwebブラウザ毎に出力結果が異なる等，中々思い通りには行かないようです．そこで，今回はsvgをwebブラウザで印刷する際の挙動についてまとめて見ました． svgを印刷用途で用いる svgは一般にディスプレイ上にグラフィックを描画するものとして考えられていますが，かつてのsvg1.2ではsvg printとして印刷用途と
Numeric Inputs - A Comparison of Browser Defaults | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The spec, purposefully, stops short of telling implementations (browsers) how to handle UI. In this article we’re looking specifically at <input type="number">, and you might be surprised to learn that the spec specifically says: This specification does not define what user interface user agents ar
image-rendering:pixelated | Blog | Chrome for Developers
As web developers we play with images all the time and in most cases browsers are great at scaling images to fit the boundaries of our site designs whilst keeping the images pretty. But what happens when you want to control how the browser scales the images on your page? Chrome 41 (Beta in January 2015) introduces a new CSS property image-rendering: pixelated (Spec) that gives you a little more co
Styling Scrollbars
WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example. Here is a screenshot for those not running a recent enough WebKit: The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit wil
スクロールバーをデザインする::-webkit-scrollbarに関しての覚え書き
Google Chrome、Safari、Lunascape Webkitなど、Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。 これはその名の通り、スクロールバーをデザインするときに使います。 基本的な説明はSafariのブログに書かれていますので、そちらを参考にしました。 また、この記事で説明に使っているキャプチャ画像は、Safariのデモページのものです。 Surfin’ Safari - Blog Archive » Styling Scrollbars スクロールバーのパーツを構成する擬似要素これらを指定するときにはWebkit用のベンダープレフィクス-webkit-を忘れないようにしましょう。 ::-webkit-scrollbarwidthで縦スクロールバーの幅、heightで横スクロールバーの高さを指定します。 パーセン
SVG and responsive images
Responsive images with svg and CSS Estelle Weyl is testing Responsive Images: Clown Car Technique SVG supports media-queries — related to its parent—, we need responsive images... Estelle provided the code of her experiments , and I've tried to make some tests... and it seems to work. You can see the HTML, CSS and SVG code I used Safari (windows) and Dolphin browser (android 4.2) failed with my ex
Media Queries within SVG - Web Performance Consulting | TimKadlec.com
There has been a lot of interesting chatter regarding SVG as of late, including thorough posts by David Bushell and Chris Coyier. One aspect in particular that is getting quite a bit of attention is the ability to embed media queries within SVG files. Even more amazing is the fact that this was first talked about by Andreas Bovens of Opera all the way back in 2009! The renewed interest in the tech
CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
SVGの次のお話
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 来年の1月か2月のオーストラリアのF2Fミーティング以降にたぶんSVG 2.0のワーキングドラフトが更新されるらしいんだけど、今日はそれのお話。語られることないんで書いてみる。 HTML5だCSS3だって話がいろいろ聞かれるけど、SVGもやっと2.0の話がぼちぼち出てきてる。SVG自体は元から日本人とかが絡んでるってのをみんな知らなかったりする。キャノンの藤澤さんが元々仕様策定に絡んでいたりしたんだけど、2.0だとKDDI(もちろん日本のね！)が仕様策定に絡んでたり (次の更新の際にはエディタに入るんじゃないかな?)。 SVG 1.1とかを制定したときと比べて今一番違うところは、HTML5やCSS3を通った後ってところ。現在の状態だと、CSSとSVGで
svgを使って図案とレイアウトとを分離する
svgは画像の表現形式であると同時にグラフィックを描くためのプログラム言語とも言えます．そのために，svgを手書きする場合に便利な機能が沢山定義されており，上手く組み合わせることで煩雑な作業を大幅に簡略化すると言ったことも可能です．ここではuse要素とスタイルシートとを組み合わせて基本となる図案とレイアウトとを分離し冗長なコードを省く方法について紹介します． 例えばトランプを思い浮かべて下さい．トランプのカードには4種のスート（マーク）と13種の位が存在しており，全部で13×4の52種類のカードが存在します．ここで同じ位のカードはマークが異なるだけで同じレイアウトとなっている点に着目します． 素朴に考えると，全部で52種類のカードをデザインすれば良いのですが，同じレイアウトなのだから何らかの方法で作業を簡略化したいところです．そこでsvgの機能を使ってスートの部分とレイアウトの部分を分離し
クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ
2012 年の 4月に CR(勧告候補) になった，CSS Image Values and Replaced Content Module Level 3 とそこで規定されてる，Linear Gradients: the ‘linear-gradient()’ notation の幾つかのブラウザでの対応具合が面倒な事になってるなぁってお話． 経緯とか 最初期 もともと，グラデーションだーと提案された頃には，WebKit の独自実装としてこんな感じの書式だった．(cf. Introducing CSS Gradients) background: -webkit-gradient(linear, left top /* 始点 */, left bottom /* 終点 */, from(#000) /* 始点の色 */, to(#FFF) /* 終点の色 */); 途中にもっと色を挟むと
FlexboxがLCに: プロパティ名などもろもろ変更 - fragmentary
タイトルの通りで、FlexboxのLCが公開。 [css3-flexbox] Going to Last Call CSS Flexible Box Layout Module (W3C Working Draft, 12 June 2012) LCは喜ばしいんだけど、なんせTabせんせやfantasaiせんせがEditorなので、政情不安定というか変なところで変更が毎回ある。 というわけで、今回はプロパティ名や値が変わった。計画だったようだけれど。 これまでかわったの flex-align align-items flex-item-align align-self flex-line-pack align-content flex-pack justify-content flex-order order flex-pack: start flex-pack: end justify-
HTML -> CSS -> SVG -> CSS
HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Grid Layoutをガッツリ使った所感 - Qiita
CodePen - CSS and SVG Masks
Platform Status - Microsoft Edge Developer