まだまだある実例に沿った:has()の使い方 | POSTD
:has()疑似クラスは筆者が断トツで一番気に入っているCSSの新機能です。筆者と同じ意見の読者も多いでしょう。少なくとも、State of CSSのアンケートに回答した方の中には多くいるはずです。セレクタを逆向きに指定できることで、これまでできると思いもしなかったようなすごいことがもっと可能になります。 「もっと」と言うのは、すでに多くの人が極めてスマートなアイデアを色々と発表しているからです。以下に一部紹介します。 Using :has() as a CSS Parent Selector and much more（Jen Simmons） Quantity Queries for “islands of elements” with the same class, thanks to CSS :has()（Bramus） Style a parent element based o
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
Web フロントエンドの実装において本来の機能を損なってはいけない
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ
Introducing Content Security Policy - MDC Doc Center
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 `�S ��View in English ��� ��Always switch to English コンテンツセキュリティポリシー (CSP) は、特定の種類のセキュリティ脅威のリスクを防止または最小限に抑えるのに役立つ機能です。これは、ウェブサイトからブラウザーへの一連の指示で構成されており、サイトを構成するコードが実行できることを制限するようにブラウザーに指示します。 CSP の主な用途は、文書が読み込むことを許可するリソース、特に JavaScript リソースを制御することです。これは主に、攻撃者が被害者のサイトに悪意のあるコードを注入するクロスサイトスクリプティング (XSS) 攻撃に対する防御として使用されます。 CSP には他
styled-componentsへの最近の感想 - saneyuki_s log
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。 そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatenablog.com/entry/2019/02/28/022750 https://saneyukis.hatenablog.com/entry/2019/0
フロントエンドの開発環境に Docker は不要(少なくともMacでは) - mizchi's blog
追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
2018年の段階で私が知らないこと
Originally written in: English • Русский (авторский перевод) Translated by readers into: Deutsch • Español • Français • Português do Brasil • Svenska • Tiếng Việt • తెలుగు • 日本語 • 简体中文 • 繁體中文 • 한국어 Read the original • Improve this translation • View all translated posts 多くの人は、私が実際に持っている知識量より遥かに多くのことを知っていると思い込んでいる。それは悪い事ではないので文句を言っているわけではない。(世の少数派の人達は、努力して資格を得ているにもかかわらず、逆の偏見に苦しめられている。それはイケてない。) この記
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
Google code-prettifyの使い方（2017年6月現在） - Steel Dragon 14106
Google code-prettifyの使い方（2017年6月現在） By raimon, 2017-06-24(土), in category Javascript Googleによって公開され、Google CodeからGitHubに移転し、現在も開発が続けられているcode-prettifyという構文ハイライトをCSS & JavaScriptで行ってくれるオープンソースライブラリがある。 個人的に同ライブラリの最新版へ追従する機会があり、日本語情報では廃れた方法が散見されたため、自分の理解を再整理する意味も込めて、2017年6月現在の導入方法をまとめておく。 ライブラリのロードにはスクリプトローダーを使う まず、ライブラリのロードにはCDNのURLを指定し、スクリプトローダーに任せてしまえば良い。 この1行でCSSファイルも同時にロードされる。 ライブラリをダウンロードして自分の
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年のモダンCSS改
HTMLとCSSだけでWebブラウザにサイドチャネル攻撃を仕掛ける手法
Web Speed Hackathon Online 出題のねらいと解説
<btn open />
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
https://hayato.io/2017/dom/