そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Sass カスケードレイヤー ネスト ワークフロー 変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる

2024/02/14 63 users Firefox CSS 疑似クラス 実装 if文

CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使... 続きを読む

2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS Flexbox subgrid ブラウ

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ

2023/12/21 156 users CSS 疑似クラス 朗報 ブラウザ サポート

CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状... 続きを読む

誇りを被った仕様の針に意図を通す | blog.jxck.io

2023/03/01 96 users jxck.io 意図 仕様 目覚ましい成果 CSS

Intro Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。 これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。 こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与... 続きを読む

Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応

2022/12/21 63 users jQuery CSS Chrome 疑似クラス 一定

Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れ... 続きを読む

ChatGPTはプログラミング言語マスター（語弊ありまくり） - kmizuの日記

2022/12/03 93 users kmizu chatgpt 語弊 Haskell Scala

皆さんおはようございます。見ている人は見ていたかもしれませんが、昨夜はかなり遅くまで巷で話題沸騰のChatGPTによくわからんクエリを投げて、その結果をみてげらげら笑っていました。特に存在しないプログラミング言語であり「ScalaにHaskellと同じ型推論を加えた」言語Scalayがあることにしたら、ChatGPTが本当にHas... 続きを読む

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性

2022/09/20 381 users jQuery CSS ドラフト Chrome 疑似クラス

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素... 続きを読む

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ

2022/09/08 185 users セレクタ CSS 偶数 奇数 疑似クラス

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追... 続きを読む

レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説

2022/08/25 137 users ビューポート CSS Container 疑似クラス 実装

CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素... 続きを読む

【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita

2022/08/19 238 users Qiita hover focus CSS where

はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思... 続きを読む

CSSの:has()疑似クラスの便利な使い方を徹底解説

2022/04/21 50 users Safari CSS 疑似クラス 要素 Web制作

先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便... 続きを読む

なにこれ、すごい便利！ CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

2022/04/12 116 users Visual コンテナクエリ Card Car CSS

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.car... 続きを読む

日本の美術館サイトはどうすればもっと良くなるか｜shosira｜note

2020/01/19 258 users ウェブディレクター ウェブデザイナー 日本 面識 緩募

美術手帖の橋爪さん（直接の面識はないと思う）が、こんな投稿をされていたので、少し筆を取ってみることにした。 【緩募】 アートに興味のあるウェブディレクターやウェブデザイナーの方々、「日本の美術館サイトはどうすればもっと良くなるか」っていう話しません？（そして記事にしたい） — 橋爪勇介｜美術手帖 (@has... 続きを読む

美少女ローグライクRPG『オメガラビリンスZ』イギリスにて発売禁止措置に。同国では極めて稀な事例、過激な表現の子供への影響を危惧 | AUTOMATON

2018/03/13 137 users AUTOMATON Matrix ＶＳＣ PQube 危惧

Video Standards Council（以下、VSC）は3月12日、美少女ローグライクRPG『 オメガラビリンスZ 』について、イギリス（およびアイルランド）での販売を認めないと 発表 した。本作はMATRIXが開発し、D3 PUBLISHERから昨年国内でPS4/Vita向けに発売。海外ではPQubeが販売を担当し、今春発売予定となっている。 Omega Labyrinth Z has ... 続きを読む

1つのvimrcをWindows/Linux/Macで使えるようにしよう! - Qiita

2018/01/14 95 users vimrc UNIX Qiita vim Mac

全国1億2千万人のVimファンのみなさま、こんにちは。 今回は1つのvimrcをOSやvimのバージョンが違う場合にも、 エラーが発生しないで起動できるようにする設定方法をご紹介します。 OS別の設定記載方法 if has("mac") " mac用の設定 elseif has("unix") " unix固有の設定 elseif has("win64") " 64bit_windows固有の設定... 続きを読む

[言語] Attacking PHP - Matzにっき(2008-01-26)

2008/01/28 214 users Matzにっき 任期 米子 おしゃべり 家族総出

_ 実家へ 私の両親が1年間の任期で東京での「ボランティア」の途中で 1週間だけ実家に帰ってくるということで、家族総出で米子へ。 昼食をいただいたり、おしゃべりをしたり 大変楽しい時間であった。 途中、私はうとうとしてしまったけど。 _ [言語] Attacking PHP PHPがいかに駄目な言語か、という話。 いろんなものがfalseだったりするせいで、新たな比較演算子「===」が必要 has... 続きを読む