The Fixed Background Attachment Hack | CSS-Tricks
What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries. Or get around it with a small
合字とCSS | 株式会社 エヴォワークス -EVOWORX-
先日、某案件で題字にletter-spacing:0.2emを指定したところ、 ChromeとSafariで表示が違っていました。 cssは以下の通りです。 font-family: "Noto Sans Japanese"; // https://fonts.googleapis.com/earlyaccess/notosansjapanese.css letter-spacing: 0.2em; Chrome Safari SafariでProfileの「f」と「i」の表示が近い。 このような「ft」「fi」「fl」など、くっついた文字を「合字」と言います。 恥ずかしながら、知りませんでした。 合字については、書体デザイナーの小林章氏のブログが詳しく、面白かったです。 デザインの現場 タイプディレクターの眼 合字（１） デザインの現場 タイプディレクターの眼 合字（２） デザインの現場
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
New in Chrome 58 | Blog | Chrome for Developers
The IndexedDB 2.0 standard is now fully supported in Chrome, and features new schema management, bulk action methods, and more standardized handling of failures. Progressive Web Apps become more immersive with display: fullscreen. allow-top-navigation-by-user-activation gives sandboxed iframes new powers And there's plenty more! Want the full list of changes? Check out the Chromium source reposito
position:sticky is back in Chrome | Blog | Chrome for Developers
Four years ago Eric Bidelman created a rather awesome blog post about the fact that position: sticky landed in WebKit, which at the time was the engine that powered Chrome (as well as many other browsers including Safari). One year later, and much to the consternation of web developers we removed position:sticky from Chrome because "the current implementation isn't designed in a way that integrate
[CSS] chromeでfloatした要素のwidthが何故か0.016px増える | おれめも v2
【2015/07/22追記】 現時点の最新版(ver 44.0.2403.89)で確認したところ、表題の問題は解消されておりました。 まだこの問題が確認される場合はChromeが最新版になっていない可能性がありますので、一度ご確認ください。 現時点でのchromeの最新版(ver 43.0.2357.81)から起きているようです。 グローバルナビ等で画像をfloatで横並びにした時、 以下の条件が組み合わさると要素のwidthが0.016px増えてしまうようです。 floatした要素にwidthが設定されていないfloatした要素の最後に空白や改行が入っているfloatした要素のfont-sizeが4の倍数pxになっているデモページを用意しましたでの見てもらうのが一番早いかと思います。 ページのソースを確認してもらうと、どういうことかわかるかと…！ 修正方法としましては、floatした要素
![[CSS] chromeでfloatした要素のwidthが何故か0.016px増える | おれめも v2](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f838750a2a071688e2813d0ffad8429b1e5afa0/height=288;version=1;width=512/https%3A%2F%2F64.media.tumblr.com%2Favatar_fe33f09627a6_128.pnj){kind=avatar}
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
Chrome on Android resizes font
Apparently once paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (causing all kinds of fun). Now I have a website where about half of the p-tags follow the size I've set and the other half change as they please - apparently depending on the length of the paragraph. How on earth do I fix this?
Chrome で背景色や背景画像を印刷する - Blog, The
Chrome は単体で PDF を印刷する機能を持ってて便利なんですが、CSS の background-color や background-image が反映されません。 「背景を印刷」みたいなオプションも見当たらなかったので、無理なんかなーって思ってたんですが、どうやら CSS で解決できるっぽいです。 @media print { body { -webkit-print-color-adjust: exact; } } 人様のページであっても、デベロッパーツールを使えばなんとかなります。 -webkit ってベンダープレフィックスが付いてますが、Safari 5 では動きませんでした。 未だに Snow Leopard を使ってるもんで、Safari 6 は確認できてません。 以下、参考にさせてもらいました。 TIP: Print CSS backgrounds in Googl
The Graphical Web Experiment | Web Platform Team Blog
The Quest for the Graphical Web was an experimental presentation we put together to tell the story of how the web is evolving from a graphical perspective. You can watch the full recording of the presentation from the Create the Web event. A web version can be viewed online at thegraphicalweb.com. We’ve also open-sourced the presentation on github. For the presentation we wanted to show some key
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
Skin your Chrome Inspector
Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the “theme” or “brush” of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can “inspect” the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像の最適化 | Web | Google Developers
CSSの確認に使いやすくてかなり便利！要素検証、アセット抽出ができるChromeの機能拡張 -CSSPeeper
http://buchineko.website/chrome-devtools-cording/
Pesticide - Kill Your Css Layout Bugs
CSSの制作・検証に役立つChromeの機能拡張のまとめ