【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
Web Audio APIを使ったブラウザフィンガープリント手法の紹介 - Qiita
Web Audio APIというAPIがあります。 RFC / 日本語訳 ざっくり言うと、ブラウザで音を作ったり出したりできるAPIです。 RFCの時点でフィンガープリントの懸念が大量に書かれてるという有様ですが、実際に実用レベルでブラウザフィンガープリントしている例が存在しました。 FingerprintJSという、そのまんまな名前のライブラリです。 以下は同ライブラリのブログより、How the Web Audio API is used for browser fingerprintingという記事のざっくり紹介です。 How the Web Audio API is used for browser fingerprinting Cookieを使うこともなく、許可を求めることもなく、Webブラウザを識別できることを知っていますか？ この技術はブラウザフィンガープリントと呼ばれていて
JavaScriptからクリップボードを操作するClipboard API ドラフト和訳 - Qiita
以下はClipboard API and eventsの2018/08/27時点での最新版、2017/09/29 Working Draftの日本語訳です。 これは、これまで共通化されていなかったクリップボードへの読み書きを一貫するのが目的のAPIです。 現在このAPIのステータスは作業草案という初期段階ですが、既に多くのブラウザで一部実装されています。 最新の編集者草案はこちらにあります。 1 Introduction このセクションは規定ではなく参考情報です。 この仕様は、カット、コピー、ペーストといったクリップボード操作を定義し、それらをWebアプリケーションから操作する高度な機能を提供します。 このドキュメントの目的は、既存の実装となるべく互換を持たせることです。 2 Use Cases このセクションは規定ではなく参考情報です。 デフォルトのクリップボード操作(カット/コピー/ペ
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
最強のリンク集の最強のリンク集 - Qiita
ここに載れたらAwesomeバッジくれてやんよ。 Githubの☆ランキングを見ていたら、8位にawesomeというのが入ってた。 前はランキングに入ってなかったと思うので最近伸びてきたようだ。 ということで見てみよう。 以下はawesomeからリンクされている対象のAwesomeコンテンツと、その簡単な紹介です。 Platforms Node.js みんな大好きNode.jsのライブラリリンク集。 Frontend Development 主にJavaScript関連の、フロントエンド言語リンク集。 iOS iPhoneアプリ用のSwiftとObjective-Cライブラリリンク集。 Android Androidアプリ用のJavaライブラリリンク集。 IoT & Hybrid Apps IoTハードウェア、クロスプラットフォームのハイブリッドアプリなどリンク集。どういうまとまりなのかよ
CSSプロフェッショナルのためのTIPS - Qiita
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
