QQビルダーを使用してCSS数量クエリを生成する

開発者が知っている、または使用している開発者はほとんどいません。 CSS数量クエリ 彼らのウェブサイトで。かなり複雑な機能ですが、あなたが コンテナ内にさまざまなアイテムがある.

数量クエリは CSSプロパティの変更/更新 に基づく 子要素に対する事前定義の制限. たとえば、 3項目以上 リストでは、スペースを節約するためにフォントを小さくすることができます。別の例は リンクの幅を更新する に基づく リンク数 ナビゲーションメニュー内.

このようなタスクはできます すぐに複雑になる しかしおかげで 数量クエリビルダー わかりにくい構文を覚える必要はありません。.

このウェブアプリ あなたのためのすべてのコードを生成します 時間を節約するために。必要がある 3つのドロップダウンメニューから選択 それはあなたの数量クエリをカスタマイズします。彼らはこのように働く：

• セレクタ - どの子要素を数えるべきか
• 照会タイプ - の中から選ぶ “せいぜい”, “少なくとも”, またはのコンボ “せいぜい” ＆ “少なくとも”
• 量 - フィルタリングするアイテムの総数

これはコードを混乱させているように見えますが、それは本当に単純な概念です。数量クエリを使用すると、CSSプロパティを適用できます 子要素の総数に基づく.

だからあなたはできる 特定のCSSスタイルを追加する あれば、言う, 少なくとも 4つの子要素（4つ以上）または、できます スタイルを追加するときだけ あります せいぜい 4つの子要素（0〜4人の子供）.

コンボセレクタを使用して定義できます 最小および最大の子供数 特定のCSSプロパティを表示するために必要です.

上のスクリーンショットの例では、 合計 “せいぜい” アイテム これは、0、1、または2人の子供がいる場合、ブロックは赤であることを意味します。私が3人の子供を得るためにもう1つを追加するならば、それからすべてのブロックは青に変わります.

何が起こっているのかわからない場合は、 小さい情報ボックスをクリック サイドバーに。それは起動します 事実と構文を持つモーダルウィンドウ 数量クエリ機能の説明.

これは非常に便利なツールです。 初心者でも経験豊富な開発者でも. それは 時間を節約する 長期的にはそれはあなたを助けるでしょう より動的なWebサイトを作成する.

始めるには、QQビルダーのWebサイトにアクセスしてください。 機能のカスタマイズを始める. あなたはできる 結果のおもちゃ そして ライブプレビューを確認する 変更内容が子要素に与える影響については、右側のペインで確認してください。.

このプロジェクトも GitHubで入手可能 だからあなたは自由です ソースコードをチェックする あるいは ローカルにコピーをダウンロードする. そして、あなたがこのアプリを愛しているか、または作成者Drew Minnsのための質問/提案があるなら、あなたは彼に簡単なツイート@drewistheを撃つことができます.