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

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

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

WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方

2024/03/14 17 users Firefox CSS 疑似クラス 特定 おかげ

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、: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()疑似クラスのサポート状... 続きを読む

AmazonのAI「Amazon Q」は重度の幻覚によってAWSデータセンターの場所などの機密データを漏えいしているとの指摘

2023/12/04 13 users 幻覚 重度 ハルシネーション AIチャットサービス 機密データ

2023年11月29日に発表されたばかりのAIチャットサービス「Amazon Q」にプライバシーの問題がある可能性が報じられました。一部の従業員によるとAmazon Qはひどい幻覚(ハルシネーション)に襲われることがあり、Amazon Web Services(AWS)のデータセンターの場所などを漏らすことがあるそうです。 Amazon’s Q has ‘severe h... 続きを読む

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

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

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

CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある

2023/01/17 7 users supports sup CSS Firefox ブラウザ

CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @sup... 続きを読む

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サイトが壊れ... 続きを読む

hiroppy on Twitter: "cssのhasの使いみちを聞かれたが、一番わかりやすいのはdialogタグが開いているときに後ろの画面をスクロールできないようにする書き方だと思う。今までjsでやってたが今はc

2022/12/04 8 users CSS 使いみち https 画面 t.co

cssのhasの使いみちを聞かれたが、一番わかりやすいのはdialogタグが開いているときに後ろの画面をスクロールできないようにする書き方だと思う。今までjsでやってたが今はcssだけでできる https://t.co/luszRTksBA 続きを読む

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

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

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

知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

2022/11/29 26 users セレクタ CSS 疑似クラス 要素 子要素

CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単で... 続きを読む

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の新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました

2022/09/06 21 users CSS Container 実装 主要ブラウザ コンテナクエリ

先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったこ... 続きを読む

レスポンシブの実装が今までと変わる！ 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... 続きを読む

道に迷った若いロシア兵 　あろうことか地元ウクライナ人から手厚いもてなしを受けて涙 | お茶に食べ物、ママとのビデオ電話まで

2022/03/06 37 users お茶 食べ物 降伏 ママ ウクライナ

「悪いのは君たちじゃない」 ウクライナに攻め込んだものの、極寒のなかで道に迷ってしまった若いロシア兵たち。どうしようもなくなり「降伏」を示したところ、意外にも、その地域に住むウクライナ市民から温かいもてなしを受けた。 その様子をとらえた動画は、ネット上で大いに話題になっている。 Russian soldier has ... 続きを読む

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

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

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

Japan's cyber-security minister has 'never used a computer' - BBC News

2018/11/15 29 users BBC News

Share this with These are external links and will open in a new window Email Share this with Email Facebook Share this with Facebook Messenger Share this with Messenger Messenger Share this with Messenger Twitter Share this with Twitter Pinterest Share this with Pinterest WhatsApp Share this with... 続きを読む

美少女ローグライク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 ... 続きを読む

痛いニュース(ﾉ∀`) : 【動画】 人間のように体を洗うネズミの動画が話題に - ライブドアブログ

2018/01/31 35 users ライブドアブログ ネズミ 痛いニュース 涙目 人間

【動画】 人間のように体を洗うネズミの動画が話題に 1 名前： 名無しさん＠涙目です。 ：2018/01/29(月) 20:37:13.53 ID:DvRblljO0.net Astonishing footage of a rat all lathered up as it washes itself in a makeshift shower - just like a human - 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固有の設定... 続きを読む