CSS

CSS

CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

How to Design Magic Animated Menu Indicator Using CSS & JavaScript

In this video, We'll learn how to design magic animated menu Indicator Using CSS & JavaScript | Vertical Tab Menu Design

Buy Me A Coffee : https://www.buymeacoffee.com/onlineTutorials 
image source : https://www.pexels.com 
icon source : https://fontawesome.com 
 

Source Code : https://www.patreon.com/onlinetutorials 
Subscribe: https://www.youtube.com/c/OnlineTutorials4Designers/featured 

#html #css #javascript 

How to Design Magic Animated Menu Indicator Using CSS & JavaScript
Noemi  Hintz

Noemi Hintz

1656727200

Vite Plugin Global Style: Deal with Global Styles for CSS, SASS, LESS

vite-plugin-global-style

CSS, SASS, LESS, Stylus files named starting with global are automatically added to the vite global style.
For global CSS styles, they will be added to the index.html and will affect all pages.
For global SASS/LESS/Stylus styles, they will be added to every SASS/LESS files using @import XXXX.

Install

npm install @originjs/vite-plugin-global-style --save-dev

or

yarn add @originjs/vite-plugin-global-style --dev

Usage

add @originjs/vite-plugin-global-style in vite.config.js.

import globalStyle from '@originjs/vite-plugin-global-style'

export default {
    plugins: [
        globalStyle(
            /* options */
        )
    ]
}

Options

sourcePath

  • Type: string
  • Default: src/assets

cssEnabled

  • Type: boolean
  • Default: true

sassEnabled

  • Type: boolean
  • Default: true

lessEnabled

  • Type: boolean
  • Default: true

stylusEnabled

  • Type: boolean
  • Default: true

recursive

  • Type: boolean
  • Default: true

Author: originjs
Source code: https://github.com/originjs/origin.js/
License:

#vite #typescript #css 

Vite Plugin Global Style: Deal with Global Styles for CSS, SASS, LESS
Noemi  Hintz

Noemi Hintz

1656705600

Vite Plugin Css Modules: Vite Projects to Support Can Use Css Modules

vite-plugin-css-modules

Make all style files supported css module, not just xxx.module.xxx

Install

npm i vite-plugin-css-modules | yarn add vite-plugin-css-modules

Usage

import vitePluginCssModules from "vite-plugin-css-modules"; export default { plugins: [vitePluginCssModules()], };

Options

precompilers [optional]

Precompiler configuration for various style files. Plug-in built-in less type file compilation configuration

eg: less

vitePluginCssModules({
    precompilers:[
        {
            regExp: /.(less)$/,
            // Self-handling compilation
            ompiler: async (code, file) => {
                const cssCode = (
                    await nodeLess.render(code, {
                        syncImport: true,
                        javascriptEnabled: true,
                    })
                ).css;
                return cssCode
            }
        }
    ]
}),

postcssPlugins [optional]

postcss plugins config, see also postcss

postcssModulesOpts [optional]

postcss-modules plugins config, see also postcss-modules

Author: wangzongming
Source code: https://github.com/wangzongming/vite-plugin-css-modules
License:

#vue #vite #css 

Vite Plugin Css Modules: Vite Projects to Support Can Use Css Modules
渚  直樹

渚 直樹

1656702000

CSSサブグリッドとコンテナクエリを使用する方法

CSSを頻繁に使用する場合は、レイアウトを並べて配置すると、片側のサイズが変更されたときにレイアウトが壊れたり、ずれたりすることがあります。ほとんどすべてのWebデザイナーがこれに直面しており、解決するのはイライラする可能性があります。幸い、CSSには、コンテンツが変更されたときに配置を維持するWebレイアウトを作成できる機能があります。これらはサブグリッドおよびコンテナクエリと呼ばれます。

CSSサブグリッドとコンテナクエリは、WebレイアウトデザインとレスポンシブWeb開発を大幅に改善できる2つの機能です。この記事では、CSSサブグリッドをコンテナークエリでシームレスに使用するためのチュートリアルを提供することにより、CSSサブグリッドについて詳しく説明します。

CSSサブグリッドとは何ですか?

CSSサブグリッドはCSSエコシステムの比較的新しい機能であり、レベル2のCSSグリッドWebデザインとレイアウト仕様への重要な追加であることが証明されています。

従来のグリッドコンテナ内で構築および調整する要素(子コンポーネント)は、親コンポーネントから行と列を直接継承しません。これにより、各要素が独立して動作する傾向があるため、それらを親グリッドに一貫して配置することが困難になります。

次に、冗長になる可能性のある2つの別々のグリッドを管理する必要があります。グリッドの子コンポーネントが親コンポーネントと完全に同期できるようになったため、プロパティsubgridの値として追加することで、この問題をすばやく解決できます。grid-template-rowsgrid-template-columns

CSSサブグリッドを使用すると、子コンポーネントはグリッド設定を維持せずに親の行と列の設定を継承できます。

以下のネストされたグリッドシステムの3枚のカードについて考えてみます。

 

中央でカードのコンテンツを増やすとどうなるか見てみましょう。

 

 

コンテンツが増えると、タイトルとフッターの位置が損なわれることがすぐにわかります。

この問題に対処するにはいくつかの方法があります。それでも、ネストされたグリッドシステムで個々のグリッドを手動で管理することになり、より大きなコードベースで作業する場合に問題が発生する可能性があります。

サブグリッドは、コンテンツを変更しても行と列がグリッドシステム内の初期位置を維持できるようにする代替修正を提供するようになりました。

subgrid上記の例から、カードのsの値として追加grid-template-rowすると、異なる出力が生成されます。

.card {
  grid-template-rows: subgrid;
}

結果は次のとおりです。

 

2枚目のカードのコンテンツが増えても、タイトルとフッターの要素は完全に配置され、親グリッドと同期しています。

サブグリッドは、子コンポーネントが親コンポーネントと祖父母コンポーネントのプロパティを継承できるため、CSSグリッドレイアウト仕様への重要な追加です。ネストされたグリッドシステム、完全に配置されたフォームレイアウト、およびその他の編集用Web配置を構築する場合に便利です。

現在、FirefoxブラウザのみがCSSサブグリッドをサポートしていますが、他の一般的なブラウザはそれほど遅れていません。このガイドを参照して、CSSサブグリッドとその機能を詳しく調べることができます。

コンテナクエリとは何ですか?

ブラウザにメディアクエリが導入されて以来、レスポンシブWebデザインは、ブラウザのビューポート用に特定のレイアウトを設計できるようになったため、将来に向けて大きな一歩を踏み出しました。

これは素晴らしいことですが、メディアクエリは、より複雑なWeb構造を作成するときに冗長性の問題も明らかにしました。たとえば、Webページのビューポートの変更に合わせて主要なレイアウトプロパティ(幅や高さなど)を調整する必要がある包含セクションにラップされたコンポーネントは、デザインに影響を与えたり、壊したりする可能性があります。

この問題を解決するには、コンポーネントのメディアクエリを包含セクションと同期させて、コンポーネントがすべてのビューポートサイズで適切に表示されるようにします。ビューポートサイズの代わりに、実際のプロパティに基づいて要素を設計するようになったため、コンテナクエリを使用してこれを簡単に解決できます。コンテナクエリを使用すると、指定したコンテナごとに任意のコンポーネントが応答できます。

たとえば、グリッドシステムでは、子コンポーネントをコンテナに合わせて、動作と応答性を決定できます。(ビューポートではなく)コンテナ内の位置に応じてスタイルを変更できます。レスポンシブグリッドレイアウトを使用してWebページを構造化することはできますが、コンテナクエリを使用することは、レスポンシブWebデザインへのより簡単なアプローチです。

コンテナクエリはどのように機能しますか?

CSSコンテナクエリについて最初に理解することは、「コンテナ」はクエリされる要素ですが、コンテナクエリ内のルールはコンテナの子孫にのみ影響するということです。たとえば、ターゲットコンテナとして、、、またはおそらくをクエリする場合mainsectionコンテナdivクエリを使用すると、コンテナサイズの変更に応じて、その中の要素がどのように変化するかについてのルールを定義できます。

を使用してコンテナクエリを作成できます@container。最も近い包含コンテキストを探します。

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上記のコードは、コンテナクエリの操作を示しています。カードのflex-direction列の値をrow、コンテナの幅が450px以上の場合に変更するようにブラウザに指示するだけです。

コンテナクエリはに含まれるように指定されましたCSS containment。3つのプロパティがそれらに付随します:

1.1。container-type

このプロパティは、クエリコンテナを要素に割り当てて、その子コンポーネントがレイアウト機能のいくつかの側面をクエリできるようにします。

  • sizeブロックおよびインライン軸のディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびサイズの包含が要素に適用されます
  • inline-sizeコンテナのインライン軸上にディメンションクエリ用のクエリコンテナを作成します。要素のレイアウト、スタイル、およびインラインサイズの包含が適用されます
  • block-sizeコンテナのブロック軸上にディメンションクエリ用のクエリコンテナを作成します。レイアウト、スタイル、およびブロックサイズの包含が要素に適用されます
  • styleスタイルクエリ用で、クエリコンテナを作成します
  • state状態クエリ用のクエリコンテナを作成します

2.2。container-name

コンテナの名前をさらに指定するオプションのプロパティ。この属性は、最も近い親コンテナをターゲットにしたくない場合にエスケープハッチとして機能します。

以下のコードを検討してください。

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

上記のCSSsidebarは、インライン軸のコンテンツのみを含む指定された名前()のコンテナーを生成します。これは、コンテンツがブロック軸で必要なだけ大きくなる可能性があることを意味します。次に、その特定のコンテナを次のcontainer-nameようにクエリできます。

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.3。container

container-typeこのプロパティは、多くの場合、両方とcontainer-name1つのステートメントで設定するために使用できる省略形のプロパティとして使用されます。

コンテナクエリのユースケース

コンテナクエリは、使用可能なコンテナスペースに依存するレイアウトを持つ再利用性の高いコンポーネントに適しています。これらはさまざまな状況で使用したり、ページ上の複数のコンテナに追加したりできます。

その他のコンテナクエリのユースケースは次のとおりです。

  • 適応可能なレイアウト
  • カード、フォーム要素、バナー、およびその他のモジュラーコンポーネント
  • CSSサイズ変更実験
  • 明確な機能を備えたモバイルおよびデスクトップのページネーション

ほとんどのブラウザはまだコンテナクエリをサポートしていませんが、GoogleChromeCanaryでその機能を簡単にテストできます。に向かいchrome://flags、有効にしCSS Container Queriesます:

 

about:config次の場所に移動して有効にすることで、MozillaFirefoxでコンテナクエリを試すこともできlayout.css.container-queriesます。

 

コンテナクエリは現在、最初の公開草案に含まれていますが、これは役立つことが証明されている機能であり、すべてのブラウザバージョンに組み込まれる可能性があります。

コンテナクエリでのCSSサブグリッドの使用

CSSサブグリッドとコンテナクエリは2つの魅力的なCSS機能であり、ウェブページのレイアウトデザインとレスポンシブスタイリングへのアプローチを変えると思いますが、どうすればそれらを組み合わせることができますか?

次の形式の3つの記事を含むセクションがあるとします。

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

次に、これらの記事をネストされたグリッドシステムに配置して、サブグリッドとコンテナクエリがそれぞれの役割を果たすことができるようにします。

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

上記のCSSコードから、2列のグリッドシステムで最初の2列が、すぐ下にある3番目の列と同じスペースを取るようにしました。次に、記事内にサブグリッドを作成して、記事のコンテンツが増えても内部の要素が同期して壊れないようにしました。

 

このシステムの応答性を高めるには、セクションをターゲットにして、子孫として記事に適用されるコンテナクエリルールを設定する必要がありました。inline-size記事(子)コンポーネントをセクション(コンテナ)の幅に合わせて拡大または縮小する必要があるため、セクションのプロパティを照会したことに気付くかもしれません。

この場合、セクションの幅が最大のときに、記事を列方向に曲げます80ch。これにより、記事はビューポートのサイズではなく、コンテナの幅に対応できるようになります。

結果は次のとおりです。

 

結論

この記事では、CSSサブグリッドとコンテナークエリ、それらの動作、およびユースケースについて説明しました。また、両方の概念を実験し、それらを組み合わせてレスポンシブレイアウトを実現することもできました。コンテナクエリとCSSサブグリッドは現在、最初の公開草案に含まれていますが、これらは有用であることが証明されている機能であり、ほとんどの新しいブラウザバージョンに組み込まれる可能性があります。

この記事があなたにとって貴重であったことを願っています。ハッピーコーディング!

ソース:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

CSSサブグリッドとコンテナクエリを使用する方法
曾 俊

曾 俊

1656700800

如何在CSS中使用 子网格和容器查询

如果您经常使用 CSS,您可能会遇到并排放置的布局在一侧的大小发生变化时会中断或错位。几乎每个网页设计师都面临过这个问题,解决起来可能会令人沮丧。幸运的是,CSS 具有允许您创建在内容更改时保持对齐的 Web 布局的功能;这些被称为子网格和容器查询。

CSS 子网格和容器查询是可以极大地改进网页布局设计和响应式网页开发的两个功能。本文将深入探讨 CSS 子网格,提供有关将它们与容器查询无缝结合使用的教程。

什么是 CSS 子网格?

CSS 子网格是 CSS 生态系统中一个相对较新的特性,被证明是对二级 CSS 网格网页设计和布局规范的重要补充。

您在传统网格容器中构建和调整的元素(子组件)不会直接从其父组件继承行和列。这会导致难以始终将它们与父网格对齐,因为每个元素都倾向于独立运行。

然后,您必须管理两个独立的网格,这可能会变得多余。您可以通过将和属性添加subgrid为值来快速解决此问题,因为网格子组件现在可以与其父组件完美同步。grid-template-rowsgrid-template-columns

CSS 子网格允许子组件继承其父行和列设置,而无需维护其网格设置。

考虑下面嵌套网格系统中的三张卡片:

嵌套网格系统中的卡片

看看当你在中心增加卡片内容时会发生什么:

嵌套网格卡增加了中心内容

 

随着内容的增加,您可以立即看到标题和页脚位置受到影响。

有几种方法可以处理这个问题。尽管如此,它们最终都会让您手动管理嵌套网格系统中的单个网格,这在处理更大的代码库时可能会出现问题。

子网格现在提供了一种替代修复,允许行和列在更改其内容的情况下保持其在网格系统中的初始位置。

从我上面的示例中,添加subgrid为我的卡片grid-template-rows 的值将产生不同的输出:

.card {
  grid-template-rows: subgrid;
}

结果如下:

子网格卡

尽管第二张卡片的内容有所增加,但标题和页脚元素仍然完美定位并与父网格同步。

子网格是 CSS 网格布局规范的重要补充,因为子组件能够继承其父组件和祖父组件的属性。在构建嵌套网格系统、完美对齐的表单布局和其他编辑网络对齐时,它会派上用场。

目前只有 Firefox 浏览器支持 CSS subgrid,其他流行的浏览器也不甘落后。您可以参考本指南以深入了解 CSS 子网格及其功能。

什么是容器查询?

自从将媒体查询引入浏览器以来,响应式网页设计向未来迈出了一大步,因为您现在可以为浏览器视口设计特定的布局。

这很好,但媒体查询在创建更复杂的 Web 结构时也暴露了冗余问题。例如,包含在包含部分中的组件需要调整其主要布局属性(如宽度或高度)以与网页视口的变化保持一致,这可能会影响和破坏设计。

要解决此问题,请保持组件的媒体查询与包含部分同步,以确保您的组件在所有视口大小上看起来都不错。您可以使用容器查询轻​​松解决此问题,因为您现在可以根据实际属性设计元素,而不是视口大小。容器查询允许任何组件根据指定的容器进行响应。

例如,在网格系统中,子组件可以与其容器对齐并确定它们的行为和响应能力。您可以根据它们在容器(而不是视口)中的位置来修改它们的样式。虽然您仍然可以使用响应式网格布局来构建网页,但使用容器查询是一种更直接的响应式网页设计方法。

容器查询如何工作?

关于 CSS 容器查询,首先要了解的是,虽然“容器”是被查询的元素,但容器查询中的规则只影响容器的后代。例如,如果您查询 a mainsection或 adiv作为目标容器,则容器查询将允许您定义其中的元素如何随着容器大小的变化而变化的规则。

您可以使用@container. 它寻找最近的包含上下文:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上面的代码是使用容器查询的说明。它只是指示浏览器将卡片flex-direction列的值更改row为容器的宽度是否至少为 450 像素。

容器查询被指定包含在CSS containment. 伴随着三个属性:

1.container-type

此属性将查询容器分配给元素,以便其子组件可以查询其布局功能的多个方面。

  • size为块和内联轴维度查询创建查询容器。布局、样式和大小包含应用于元素
  • inline-size为容器的内联轴上的维度查询创建一个查询容器。应用了元素的布局、样式和行内大小包含
  • block-size为容器的块轴上的维度查询创建一个查询容器。布局、样式和块大小包含应用于元素
  • style用于样式查询,并创建一个查询容器
  • state为状态查询创建查询容器

2.container-name

进一步指定容器名称的可选属性。当我们不想以最近的父容器为目标时,此属性充当逃生舱口。

考虑下面的代码:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

sidebar上面的CSS生成了一个具有指定名称(然后,您可以像这样查询该特定容器container-name

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

此属性通常用作速记属性,可用于在一个语句中container-type同时设置。container-name

容器查询的用例

容器查询适用于高度可重用的组件,其布局取决于可用容器空间。它们可以在各种情况下使用,也可以添加到页面上的多个容器中。

其他容器查询用例包括:

  • 适应性布局
  • 卡片、表单元素、横幅和其他模块化组件
  • CSS 调整大小实验
  • 具有不同功能的移动和桌面分页

大多数浏览器仍然不支持容器查询,但您可以在 Google Chrome Canary 上轻松测试它们的功能。前往chrome://flags并启用CSS Container Queries

启用 css 容器查询

您还可以通过以下方式在 Mozilla Firefox 上试验容器查询about:config并启用layout.css.container-queries

启用容器查询 Firefox

容器查询目前处于他们的第一个公开工作草案中,但该功能已被证明很有用,并且很可能被合并到所有浏览器版本中。

将 CSS 子网格与容器查询一起使用

CSS 子网格和容器查询是两个引人入胜的 CSS 功能,我认为它们会改变您对网页布局设计和响应式样式的方法,但是我们如何将它们结合起来呢?

假设我们有一个部分包含以下格式的三篇文章:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

现在让我们将这些文章放在嵌套网格系统中,子网格和容器查询可以在其中发挥作用:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

从上面的 CSS 代码中,我们使前两列在两列网格系统中占用的空间与下面的第三列一样多。然后我们在文章内部创建了一个子网格,以确保里面的元素是同步的并且不会中断,即使文章的内容增加了。

示例卡片网格系统

为了使这个系统更具响应性,我们必须针对该部分并设置一些容器查询规则,这些规则将应用于文章作为其后代。您可能注意到我们查询了inline-size节的属性,因为我们希望文章(子)组件随着节(容器)的宽度内联地增长或缩小。

在这种情况下,当节的宽度最大为 时,我们使文章在列方向上弯曲80ch。这使我们的文章不响应视口大小而是响应容器的宽度。

结果如下:

容器查询子网格一起工作

结论

本文介绍了 CSS 子网格和容器查询、它们的工作原理和用例。我们还能够试验这两个概念并将它们结合起来以实现响应式布局。容器查询和 CSS 子网格目前处于他们的第一个公开工作草案中,但它们已被证明是有用的,并且很可能被合并到大多数新的浏览器版本中。

我希望这篇文章对你有价值。快乐编码!

来源:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

如何在CSS中使用 子网格和容器查询
Mélanie  Faria

Mélanie Faria

1656698880

Como Usar Consultas De Subgrade E Contêiner CSS

Se você trabalha com CSS com frequência, pode ter experimentado layouts colocados lado a lado que quebram ou ficam desalinhados quando o tamanho de um lado muda. Quase todo web designer já enfrentou isso, e pode ser frustrante resolver. Felizmente, o CSS possui recursos que permitem criar layouts da Web que mantêm o alinhamento quando seu conteúdo é alterado; elas são chamadas de consultas de subgrade e de contêiner.

As consultas de subgrade e contêiner CSS são dois recursos que podem melhorar muito o design do layout da Web e o desenvolvimento da Web responsivo. Este artigo mergulhará profundamente nas subgrades CSS, fornecendo um tutorial sobre como usá-las perfeitamente com consultas de contêiner.

O que são subgrades CSS?

As subgrades CSS são um recurso relativamente novo no ecossistema CSS, provando ser uma adição significativa às especificações de layout e design da web da grade CSS de nível dois.

Os elementos (componentes filho) que você constrói e ajusta dentro de um contêiner de grade tradicional não herdam diretamente linhas e colunas de seu componente pai. Isso causa dificuldade em alinhá-los consistentemente com a grade pai, pois cada elemento tende a agir de forma independente.

Você então tem que gerenciar duas grades separadas, que podem se tornar redundantes. Você pode resolver esse problema rapidamente adicionando subgridcomo um valor para as propriedades grid-template-rowse grid-template-columns, porque os componentes filho da grade agora podem sincronizar perfeitamente com seu componente pai.

As subgrades CSS permitem que os componentes filhos herdem suas configurações de linha e coluna pai sem manter suas configurações de grade.

Considere as três cartas em um sistema de grade aninhado abaixo:

Cartões em um sistema de grade aninhado

Veja o que acontece quando você aumenta o conteúdo do cartão no centro:

Os cartões de grade aninhados aumentaram o conteúdo central

 

Você pode ver imediatamente que as posições do título e do rodapé ficam comprometidas à medida que o conteúdo aumenta.

Existem várias maneiras de lidar com esse problema. Ainda assim, todos eles acabam com você gerenciando manualmente grades individuais em sistemas de grade aninhados, o que pode ser problemático ao trabalhar em uma base de código maior.

As subgrades agora fornecem uma correção alternativa que permite que linhas e colunas mantenham sua posição inicial no sistema de grade apesar de alterar seu conteúdo.

Do meu exemplo acima, adicionar subgrido valor do grid-template-rows do meu cartão produzirá uma saída diferente:

.card {
  grid-template-rows: subgrid;
}

Aqui está o resultado:

cartões de subgrade

Apesar do aumento de conteúdo do segundo cartão, os elementos de título e rodapé ainda estão perfeitamente posicionados e sincronizados com a grade pai.

Subgrid é uma adição significativa às especificações de layout de grade CSS devido à capacidade dos componentes filho de herdar as propriedades de seus componentes pai e avô. Ele é útil ao construir sistemas de grade aninhados, layouts de formulários perfeitamente alinhados e outros alinhamentos editoriais da web.

Atualmente, apenas o navegador Firefox suporta subgrade CSS, mas outros navegadores populares não ficam muito atrás. Você pode consultar este guia para se aprofundar nas subgrades CSS e suas funções.

O que são consultas de contêiner?

Desde a introdução das consultas de mídia nos navegadores, o web design responsivo deu um passo gigantesco no futuro, pois agora você pode projetar layouts específicos para as janelas de visualização do navegador.

Isso é ótimo, mas as consultas de mídia também expuseram um problema de redundância ao criar estruturas da Web mais complexas. Por exemplo, os componentes envolvidos em uma seção de contenção que precisam ajustar suas propriedades de layout primárias (como largura ou altura) para alinhar com uma alteração na janela de visualização da página da Web podem afetar e interromper o design.

Para resolver esse problema, mantenha as consultas de mídia do componente em sincronia com a seção que o contém para garantir que seu componente fique bem em todos os tamanhos de janela de visualização. Você pode resolver isso facilmente com consultas de contêiner porque, em vez de tamanhos de janela de visualização, agora você projeta elementos com base em suas propriedades reais. As consultas de contêiner permitem que qualquer componente responda por um contêiner especificado.

Em um sistema de grade, por exemplo, os componentes filhos podem se alinhar com seu contêiner e determinar seu comportamento e capacidade de resposta. Você pode modificar seus estilos dependendo de sua posição no contêiner (não na viewport). Embora você ainda possa estruturar páginas da Web com um layout de grade responsivo, o uso de consultas de contêiner é uma abordagem mais direta para o design da Web responsivo.

Como funcionam as consultas de contêiner?

A primeira coisa a entender sobre consultas de contêiner CSS é que, enquanto “contêineres” são os elementos que estão sendo consultados, as regras nas consultas de contêiner afetam apenas os descendentes de contêiner. Por exemplo, se você consultar um main, section, ou talvez um divcomo seu contêiner de destino, as consultas de contêiner permitirão que você defina regras sobre como os elementos dentro deles mudam à medida que o tamanho do contêiner muda.

Você pode criar uma consulta de contêiner com @container. Ele procura o contexto de contenção mais próximo:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

O código acima é uma ilustração do trabalho com consultas de contêiner. Ele simplesmente instrui o navegador a alterar o valor da flex-directioncoluna do cartão para rowse a largura do contêiner for de pelo menos 450px.

As consultas de contêiner foram especificadas para serem incluídas no CSS containment. Três propriedades os acompanham:

primeiro.container-type

Essa propriedade atribui um contêiner de consulta a um elemento para que seus componentes filho possam consultar vários aspectos de seus recursos de layout.

  • sizecria um contêiner de consulta para consultas dimensionais de eixo em bloco e em linha. A contenção de layout, estilo e tamanho é aplicada ao elemento
  • inline-sizecria um contêiner de consulta para consultas dimensionais no eixo embutido do contêiner. O layout, o estilo e a contenção de tamanho embutido do elemento são aplicados
  • block-sizecria um contêiner de consulta para consultas dimensionais no eixo de bloco do contêiner. Layout, estilo e contenção de tamanho de bloco são aplicados ao elemento
  • styleé para consultas de estilo e cria um contêiner de consulta
  • statecria um contêiner de consulta para consultas de estado

2.container-name

Uma propriedade opcional que especifica ainda mais o nome do contêiner. Este atributo atua como uma saída de escape quando não queremos direcionar o container pai mais próximo.

Considere o código abaixo:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

O CSS acima gera um container com um nome especificado ( sidebar) que contém apenas conteúdo no eixo inline, o que significa que o conteúdo pode crescer o quanto for necessário no eixo do bloco. Você pode consultar esse contêiner específico com o seguinte container-name:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Essa propriedade é frequentemente usada como uma propriedade abreviada que você pode usar para definir ambas container-typee container-nameem uma instrução.

Casos de uso para consultas de contêiner

As consultas de contêiner são apropriadas para componentes altamente reutilizáveis ​​com um layout dependente do espaço de contêiner disponível. Eles podem ser usados ​​em várias situações ou adicionados a vários contêineres na página.

Outros casos de uso de consulta de contêiner incluem:

  • Layouts adaptáveis
  • Cartões, elementos de formulário, banners e outros componentes modulares
  • Experiências de redimensionamento CSS
  • Paginação mobile e desktop com funcionalidades distintas

A maioria dos navegadores ainda não oferece suporte a consultas de contêiner, mas você pode testar prontamente seus recursos no Google Chrome Canary. Vá para chrome://flagse habilite CSS Container Queries:

Ativando consultas de contêiner css

Você também pode experimentar consultas de contêiner no Mozilla Firefox acessando about:confige ativando layout.css.container-queries:

habilitando consultas de contêiner firefox

As consultas de contêiner estão atualmente em seu primeiro rascunho de trabalho público, mas é um recurso que se mostrou útil e provavelmente será incorporado em todas as versões do navegador.

Usando subgrades CSS com consultas de contêiner

Subgrades CSS e consultas de contêiner são dois recursos CSS fascinantes que acho que mudarão sua abordagem ao design de layout de página da Web e estilo responsivo, mas como podemos combiná-los?

Digamos que temos uma seção contendo três artigos no seguinte formato:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Agora vamos colocar esses artigos em um sistema de grade aninhado onde subgrades e consultas de contêiner podem desempenhar suas funções:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

A partir do código CSS acima, fizemos com que as duas primeiras colunas ocupassem tanto espaço em um sistema de grade de duas colunas quanto a terceira, que está logo abaixo. Em seguida, criamos uma subgrade dentro do artigo para garantir que os elementos internos estejam sincronizados e não possam quebrar, mesmo quando o conteúdo do artigo for aumentado.

exemplo de sistema de grade de cartão

Para tornar esse sistema mais responsivo, tivemos que direcionar a seção e definir algumas regras de consulta de contêiner que se aplicam aos artigos como seus descendentes. Você pode notar que consultamos a inline-sizepropriedade da seção porque queremos que os componentes do artigo (filho) cresçam ou diminuam em linha com a largura da seção (contêiner).

Neste caso, fizemos a flexão dos artigos na direção da coluna quando a largura da seção é no máximo 80ch. Isso permite que nossos artigos respondam não ao tamanho da janela de visualização, mas à largura do contêiner.

Aqui está o resultado:

subgrades de consultas de contêiner trabalhando juntas

Conclusão

Este artigo abordou subgrades CSS e consultas de contêiner, seu funcionamento e casos de uso. Também pudemos experimentar os dois conceitos e combiná-los para criar um layout responsivo. Consultas de contêiner e subgrades CSS estão atualmente em seu primeiro rascunho de trabalho público, mas são recursos que se mostraram úteis e provavelmente serão incorporados na maioria das novas versões de navegadores.

Espero que este artigo tenha sido valioso para você. Boa codificação!

Fonte: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Como Usar  Consultas De Subgrade E Contêiner CSS
Hoang  Kim

Hoang Kim

1656697800

Cách Sử Dụng CSS Subgrid Và Container Truy Vấn

Nếu thường xuyên làm việc với CSS, bạn có thể gặp phải tình trạng các bố cục đặt cạnh nhau bị vỡ hoặc bị lệch khi kích thước của một bên thay đổi. Hầu hết mọi nhà thiết kế web đều phải đối mặt với điều này và nó có thể gây khó chịu khi giải quyết. May mắn thay, CSS có các tính năng cho phép bạn tạo bố cục web duy trì sự liên kết khi nội dung của chúng thay đổi; chúng được gọi là truy vấn lưới con và vùng chứa.

CSS subgrid và container truy vấn là hai tính năng có thể cải thiện đáng kể thiết kế bố cục web và phát triển web đáp ứng. Bài viết này sẽ đi sâu vào các mã con CSS bằng cách cung cấp một hướng dẫn về cách sử dụng chúng một cách liền mạch với các truy vấn vùng chứa.

CSS con là gì?

Các mã con CSS là một tính năng tương đối mới trong hệ sinh thái CSS, được chứng minh là một bổ sung đáng kể cho các thông số kỹ thuật bố trí và thiết kế web lưới CSS cấp hai.

Các phần tử (thành phần con) mà bạn xây dựng và điều chỉnh bên trong vùng chứa lưới truyền thống không kế thừa trực tiếp các hàng và cột từ thành phần mẹ của chúng. Điều này gây ra khó khăn trong việc căn chỉnh chúng một cách nhất quán với lưới mẹ, vì mỗi phần tử có xu hướng hoạt động độc lập.

Sau đó, bạn phải quản lý hai lưới riêng biệt, có thể bị dư thừa. Bạn có thể nhanh chóng giải quyết vấn đề này bằng cách thêm subgriddưới dạng giá trị cho thuộc tính grid-template-rowsgrid-template-columns, vì các thành phần con của lưới giờ đây có thể đồng bộ hóa hoàn hảo với thành phần mẹ của chúng.

Các mã con CSS cho phép các thành phần con kế thừa cài đặt hàng và cột cha của chúng mà không cần duy trì cài đặt lưới của chúng.

Hãy xem xét ba thẻ trong một hệ thống lưới lồng nhau dưới đây:

Các thẻ trong hệ thống lưới lồng nhau

Hãy xem điều gì sẽ xảy ra khi bạn tăng nội dung của thẻ ở trung tâm:

Thẻ lưới lồng nhau làm tăng nội dung trung tâm

 

Bạn có thể thấy ngay rằng vị trí tiêu đề và chân trang bị xâm phạm khi nội dung tăng lên.

Có một số cách để giải quyết vấn đề này. Tuy nhiên, tất cả đều kết thúc với việc bạn quản lý thủ công các lưới riêng lẻ trong các hệ thống lưới lồng nhau, điều này có thể gây ra vấn đề khi làm việc trên một cơ sở mã lớn hơn.

Các subgrids hiện cung cấp một bản sửa lỗi thay thế cho phép các hàng và cột duy trì vị trí ban đầu của chúng trong hệ thống lưới mặc dù đã thay đổi nội dung của chúng.

Từ ví dụ của tôi ở trên, việc thêm subgridlàm giá trị cho các thẻ của tôi grid-template-rowsẽ tạo ra một đầu ra khác:

.card {
  grid-template-rows: subgrid;
}

Đây là kết quả:

thẻ mạng con

Bất chấp sự gia tăng nội dung của thẻ thứ hai, các phần tử tiêu đề và chân trang vẫn được định vị hoàn hảo và đồng bộ với lưới mẹ.

Subgrid là một bổ sung đáng kể cho các đặc tả bố cục lưới CSS vì khả năng của các thành phần con kế thừa các thuộc tính của các thành phần cha và ông của chúng. Nó rất hữu ích khi xây dựng hệ thống lưới lồng nhau, bố cục biểu mẫu được căn chỉnh hoàn hảo và các căn chỉnh web biên tập khác.

Hiện tại, chỉ có trình duyệt Firefox hỗ trợ CSS subgrid, nhưng các trình duyệt phổ biến khác cũng không kém xa. Bạn có thể tham khảo hướng dẫn này để tìm hiểu sâu hơn về các mã con CSS và chức năng của chúng.

Truy vấn vùng chứa là gì?

Kể từ khi giới thiệu các truy vấn phương tiện cho các trình duyệt, thiết kế web đáp ứng đã có một bước tiến lớn trong tương lai, vì giờ đây bạn có thể thiết kế các bố cục cụ thể cho các khung nhìn của trình duyệt.

Điều này thật tuyệt, nhưng các truy vấn phương tiện cũng gây ra vấn đề dư thừa khi tạo các cấu trúc web phức tạp hơn. Ví dụ: các thành phần được bao bọc trong phần chứa cần điều chỉnh các thuộc tính bố cục chính của chúng (như chiều rộng hoặc chiều cao) để phù hợp với sự thay đổi trong khung nhìn của trang web có thể ảnh hưởng và phá vỡ thiết kế.

Để giải quyết vấn đề này, hãy giữ cho các truy vấn phương tiện của thành phần đồng bộ với phần chứa để đảm bảo rằng thành phần của bạn trông đẹp trên tất cả các kích thước khung nhìn. Bạn có thể dễ dàng giải quyết vấn đề này với các truy vấn vùng chứa vì thay vì kích thước khung nhìn, giờ đây bạn thiết kế các phần tử dựa trên các thuộc tính thực tế của chúng. Truy vấn vùng chứa cho phép bất kỳ thành phần nào phản hồi trên một vùng chứa được chỉ định.

Ví dụ: trong hệ thống lưới, các thành phần con có thể phù hợp với vùng chứa của chúng và xác định hành vi cũng như khả năng phản hồi của chúng. Bạn có thể sửa đổi kiểu của chúng tùy thuộc vào vị trí của chúng trong vùng chứa (không phải chế độ xem). Mặc dù bạn vẫn có thể cấu trúc các trang web với bố cục lưới đáp ứng, nhưng sử dụng truy vấn vùng chứa là một cách tiếp cận đơn giản hơn để thiết kế web đáp ứng.

Các truy vấn vùng chứa hoạt động như thế nào?

Điều đầu tiên cần hiểu về truy vấn vùng chứa CSS là mặc dù “vùng chứa” là các phần tử đang được truy vấn, các quy tắc trong truy vấn vùng chứa chỉ ảnh hưởng đến con cháu vùng chứa. Ví dụ: nếu bạn truy vấn a main, sectionhoặc có thể a divlàm vùng chứa mục tiêu của mình, các truy vấn vùng chứa sẽ cho phép bạn xác định các quy tắc về cách các phần tử bên trong chúng thay đổi khi kích thước vùng chứa thay đổi.

Bạn có thể tạo truy vấn vùng chứa với @container. Nó tìm kiếm bối cảnh ngăn chặn gần nhất:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Đoạn mã trên là một minh họa về cách làm việc với các truy vấn vùng chứa. Nó chỉ đơn giản là hướng dẫn trình duyệt thay đổi giá trị của flex-directioncột của thẻ thành rownếu chiều rộng của vùng chứa ít nhất là 450px.

Các truy vấn vùng chứa đã được chỉ định để được đưa vào CSS containment. Ba thuộc tính đi kèm với chúng:

1.container-type

Thuộc tính này chỉ định một vùng chứa truy vấn cho một phần tử để các thành phần con của nó có thể truy vấn một số khía cạnh của các tính năng bố cục của nó.

  • sizetạo một vùng chứa truy vấn cho các truy vấn chiều trục khối và trục nội tuyến. Bố cục, kiểu và ngăn kích thước được áp dụng cho phần tử
  • inline-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục nội tuyến của vùng chứa. Bố cục, kiểu và ngăn chứa kích thước nội tuyến của phần tử được áp dụng
  • block-sizetạo một vùng chứa truy vấn cho các truy vấn thứ nguyên trên trục khối của vùng chứa. Bố cục, kiểu và ngăn kích thước khối được áp dụng cho phần tử
  • styledành cho các truy vấn kiểu và tạo một vùng chứa truy vấn
  • statetạo một vùng chứa truy vấn cho các truy vấn trạng thái

2.container-name

Thuộc tính tùy chọn chỉ định thêm tên của vùng chứa. Thuộc tính này hoạt động như một lối thoát khi chúng ta không muốn nhắm mục tiêu vùng chứa mẹ gần nhất.

Hãy xem xét đoạn mã dưới đây:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

CSS ở trên tạo một vùng chứa với tên được chỉ định ( sidebar) chỉ chứa nội dung trên trục nội tuyến, có nghĩa là nội dung có thể phát triển nhiều đến mức cần thiết trên trục khối. Sau đó, bạn có thể truy vấn vùng chứa cụ thể đó với container-nametương tự như vậy:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Thuộc tính này thường được sử dụng như một thuộc tính tốc ký mà bạn có thể sử dụng để đặt cả hai container-typecontainer-nametrong một câu lệnh.

Các trường hợp sử dụng cho các truy vấn vùng chứa

Truy vấn vùng chứa thích hợp cho các thành phần có thể tái sử dụng cao với bố cục phụ thuộc vào không gian vùng chứa có sẵn. Chúng có thể được sử dụng trong nhiều trường hợp khác nhau hoặc được thêm vào nhiều vùng chứa trên trang.

Các trường hợp sử dụng truy vấn vùng chứa khác bao gồm:

  • Bố cục có thể điều chỉnh
  • Thẻ, thành phần biểu mẫu, biểu ngữ và các thành phần mô-đun khác
  • Thử nghiệm thay đổi kích thước CSS
  • Phân trang trên thiết bị di động và máy tính để bàn với các chức năng riêng biệt

Hầu hết các trình duyệt vẫn không hỗ trợ truy vấn vùng chứa, nhưng bạn có thể dễ dàng kiểm tra các tính năng của chúng trên Google Chrome Canary. Đi tới chrome://flagsvà bật CSS Container Queries:

Bật truy vấn vùng chứa css

Bạn cũng có thể thử nghiệm với các truy vấn vùng chứa trên Mozilla Firefox bằng cách truy cập about:configvà bật layout.css.container-queries:

bật truy vấn vùng chứa firefox

Các truy vấn vùng chứa hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng nó là một tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong tất cả các phiên bản trình duyệt.

Sử dụng mã con CSS với các truy vấn vùng chứa

Các mã con CSS và truy vấn vùng chứa là hai tính năng CSS hấp dẫn mà tôi nghĩ sẽ thay đổi cách tiếp cận của bạn đối với thiết kế bố cục trang web và kiểu đáp ứng, nhưng làm thế nào chúng ta có thể kết hợp chúng?

Giả sử chúng tôi có một phần chứa ba bài báo ở định dạng sau:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Bây giờ, hãy đặt các bài viết này trong một hệ thống lưới lồng nhau, nơi các mã con và truy vấn vùng chứa có thể đóng vai trò của chúng:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

Từ mã CSS trên, chúng tôi đã tạo cho hai cột đầu tiên chiếm nhiều không gian trong hệ thống lưới hai cột như cột thứ ba, nằm ngay bên dưới. Sau đó, chúng tôi tạo một mạng con bên trong bài viết để đảm bảo các yếu tố bên trong được đồng bộ và không thể phá vỡ, ngay cả khi nội dung bài viết được tăng lên.

ví dụ hệ thống lưới thẻ

Để làm cho hệ thống này phản hồi nhanh hơn, chúng tôi phải nhắm mục tiêu phần này và đặt một số quy tắc truy vấn vùng chứa áp dụng cho các bài viết dưới dạng con của chúng. Bạn có thể nhận thấy rằng chúng tôi đã truy vấn thuộc inline-sizetính của phần vì chúng tôi muốn các thành phần của bài viết (con) phát triển hoặc thu nhỏ nội tuyến với chiều rộng (vùng chứa) của phần.

Trong trường hợp này, chúng tôi đã làm cho các bài viết uốn cong theo hướng cột khi chiều rộng của phần ở mức tối đa 80ch. Điều này cho phép các bài viết của chúng tôi phản hồi không phải kích thước khung nhìn mà là chiều rộng của vùng chứa của chúng.

Đây là kết quả:

truy vấn vùng chứa mã con hoạt động cùng nhau

Sự kết luận

Bài viết này đề cập đến các mã con CSS và truy vấn vùng chứa, hoạt động của chúng và các trường hợp sử dụng. Chúng tôi cũng có thể thử nghiệm cả hai khái niệm và kết hợp chúng để mang lại bố cục đáp ứng. Truy vấn vùng chứa và mã con CSS hiện đang ở trong bản nháp làm việc công khai đầu tiên của chúng, nhưng chúng là những tính năng đã được chứng minh là hữu ích và có khả năng được tích hợp trong hầu hết các phiên bản trình duyệt mới.

Tôi hy vọng bài viết này có giá trị đối với bạn. Chúc bạn viết mã vui vẻ!

Nguồn: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Cách Sử Dụng CSS Subgrid Và Container Truy Vấn
Diego  Elizondo

Diego Elizondo

1656696600

Cómo Usar Consultas De Contenedor Y Subcuadrícula De CSS

Si trabaja con CSS a menudo, es posible que haya experimentado diseños colocados uno al lado del otro que se rompen o se desalinean cuando cambia el tamaño de un lado. Casi todos los diseñadores web se han enfrentado a esto y puede ser frustrante resolverlo. Afortunadamente, CSS tiene funciones que le permiten crear diseños web que mantienen la alineación cuando cambia su contenido; se denominan consultas de subcuadrícula y de contenedor.

Las consultas de contenedor y subcuadrícula de CSS son dos características que pueden mejorar enormemente el diseño de diseño web y el desarrollo web receptivo. Este artículo profundizará en las subcuadrículas de CSS al proporcionar un tutorial sobre cómo usarlas sin problemas con consultas de contenedores.

¿Qué son las subcuadrículas de CSS?

Las subcuadrículas de CSS son una característica relativamente nueva en el ecosistema de CSS, lo que demuestra ser una adición significativa a las especificaciones de diseño y diseño web de la cuadrícula de CSS de nivel dos.

Los elementos (componentes secundarios) que construye y ajusta dentro de un contenedor de cuadrícula tradicional no heredan directamente filas y columnas de su componente principal. Esto causa dificultad para alinearlos consistentemente con la cuadrícula principal, ya que cada elemento tiende a actuar de forma independiente.

Luego, debe administrar dos cuadrículas separadas, que pueden volverse redundantes. Puede resolver este problema rápidamente agregando subgridun valor para las propiedades grid-template-rowsy grid-template-columns, porque los componentes secundarios de la cuadrícula ahora pueden sincronizarse perfectamente con su componente principal.

Las subcuadrículas de CSS permiten que los componentes secundarios hereden la configuración de fila y columna principal sin mantener la configuración de la cuadrícula.

Considere las tres tarjetas en un sistema de cuadrícula anidado a continuación:

 

Mira lo que sucede cuando aumentas el contenido de la tarjeta en el centro:

 

 

Inmediatamente puede ver que las posiciones del título y el pie de página se ven comprometidas a medida que aumenta el contenido.

Hay varias formas de tratar este problema. Aún así, todos terminan con la administración manual de grillas individuales en sistemas de grillas anidadas, lo que puede ser problemático cuando se trabaja en una base de código más grande.

Las subcuadrículas ahora brindan una solución alternativa que permite que las filas y las columnas mantengan su posición inicial en el sistema de cuadrícula a pesar de cambiar su contenido.

De mi ejemplo anterior, agregar subgridcomo el valor de mi tarjeta grid-template-rowproducirá una salida diferente:

.card {
  grid-template-rows: subgrid;
}

Aquí está el resultado:

 

A pesar del aumento de contenido de la segunda tarjeta, los elementos de título y pie de página aún están perfectamente posicionados y sincronizados con la cuadrícula principal.

Subgrid es una adición importante a las especificaciones de diseño de cuadrícula de CSS debido a la capacidad de los componentes secundarios para heredar las propiedades de sus componentes principales y abuelos. Resulta útil al crear sistemas de cuadrículas anidadas, diseños de formularios perfectamente alineados y otras alineaciones web editoriales.

Actualmente, solo el navegador Firefox es compatible con la subcuadrícula CSS, pero otros navegadores populares no se quedan atrás. Puede consultar esta guía para profundizar en las subcuadrículas de CSS y sus funciones.

¿Qué son las consultas de contenedores?

Desde la introducción de las consultas de medios en los navegadores, el diseño web receptivo ha dado un paso de gigante hacia el futuro, ya que ahora puede diseñar diseños específicos para las ventanas gráficas del navegador.

Esto es excelente, pero las consultas de medios también han expuesto un problema de redundancia al crear estructuras web más complejas. Por ejemplo, los componentes envueltos en una sección contenedora que necesitan ajustar sus propiedades de diseño principales (como ancho o alto) para alinearse con un cambio en la ventana gráfica de la página web pueden afectar y romper el diseño.

Para resolver este problema, mantenga las consultas de medios del componente sincronizadas con la sección contenedora para asegurarse de que su componente se vea bien en todos los tamaños de ventana gráfica. Puede resolver esto fácilmente con consultas de contenedores porque en lugar de tamaños de ventana gráfica, ahora diseña elementos en función de sus propiedades reales. Las consultas de contenedor permiten que cualquier componente responda por un contenedor específico.

En un sistema de cuadrícula, por ejemplo, los componentes secundarios pueden alinearse con su contenedor y determinar su comportamiento y capacidad de respuesta. Puede modificar sus estilos según su posición en el contenedor (no en la ventana gráfica). Si bien aún puede estructurar páginas web con un diseño de cuadrícula receptivo, el uso de consultas de contenedor es un enfoque más directo para el diseño web receptivo.

¿Cómo funcionan las consultas de contenedores?

Lo primero que debe comprender acerca de las consultas de contenedor CSS es que, si bien los "contenedores" son los elementos que se consultan, las reglas dentro de las consultas de contenedor solo afectan a los descendientes del contenedor. Por ejemplo, si consulta un main, sectiono quizás un divcomo su contenedor de destino, las consultas de contenedores le permitirán definir reglas sobre cómo cambian los elementos dentro de ellos a medida que cambia el tamaño del contenedor.

Puede crear una consulta de contenedor con @container. Busca el contexto de contención más cercano:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

El código anterior es una ilustración del trabajo con consultas de contenedor. Simplemente le indica al navegador que cambie el valor de la flex-directioncolumna de la tarjeta rowsi el ancho del contenedor es de al menos 450 px.

Se especificó que las consultas de contenedores se incluyeran en CSS containment. Tres propiedades les acompañan:

1.container-type

Esta propiedad asigna un contenedor de consultas a un elemento para que sus componentes secundarios puedan consultar varios aspectos de sus características de diseño.

  • sizecrea un contenedor de consultas para consultas dimensionales de bloques y ejes en línea. El diseño, el estilo y la contención de tamaño se aplican al elemento
  • inline-sizecrea un contenedor de consultas para consultas dimensionales en el eje en línea del contenedor. Se aplican el diseño, el estilo y la contención de tamaño en línea del elemento.
  • block-sizecrea un contenedor de consultas para consultas dimensionales en el eje de bloque del contenedor. El diseño, el estilo y la contención de tamaño de bloque se aplican al elemento
  • stylees para consultas de estilo y crea un contenedor de consultas
  • statecrea un contenedor de consulta para consultas de estado

2.container-name

Una propiedad opcional que especifica aún más el nombre del contenedor. Este atributo actúa como una escotilla de escape cuando no queremos apuntar al contenedor principal más cercano.

Considere el siguiente código:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

El CSS anterior genera un contenedor con un nombre específico ( sidebar) que solo contiene contenido en el eje en línea, lo que significa que el contenido puede crecer tanto como sea necesario en el eje del bloque. Luego puede consultar ese contenedor específico con container-namealgo así:

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Esta propiedad se usa a menudo como una propiedad abreviada que puede usar para establecer ambos container-typey container-nameen una declaración.

Casos de uso para consultas de contenedores

Las consultas de contenedor son apropiadas para componentes altamente reutilizables con un diseño que depende del espacio disponible en el contenedor. Se pueden usar en varias situaciones o se pueden agregar a varios contenedores en la página.

Otros casos de uso de consulta de contenedor incluyen:

  • Diseños adaptables
  • Tarjetas, elementos de formulario, pancartas y otros componentes modulares
  • Experimentos de cambio de tamaño de CSS
  • Paginación móvil y de escritorio con distintas funcionalidades.

La mayoría de los navegadores aún no admiten consultas de contenedores, pero puede probar fácilmente sus funciones en Google Chrome Canary. Dirígete a chrome://flagsy habilita CSS Container Queries:

 

También puede experimentar con consultas de contenedores en Mozilla Firefox dirigiéndose about:configy habilitando layout.css.container-queries:

 

Las consultas de contenedor se encuentran actualmente en su primer borrador de trabajo público, pero es una característica que ha demostrado ser útil y es probable que se incorpore en todas las versiones del navegador.

Uso de subcuadrículas de CSS con consultas de contenedores

Las subcuadrículas de CSS y las consultas de contenedores son dos características de CSS fascinantes que creo que cambiarán su enfoque del diseño de diseño de páginas web y el estilo receptivo, pero ¿cómo podemos combinarlas?

Digamos que tenemos una sección que contiene tres artículos en el siguiente formato:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Ahora coloquemos estos artículos en un sistema de cuadrícula anidado donde las subcuadrículas y las consultas de contenedores pueden desempeñar sus funciones:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

A partir del código CSS anterior, hicimos que las dos primeras columnas ocuparan tanto espacio en un sistema de cuadrícula de dos columnas como la tercera, que está justo debajo. Luego creamos una subcuadrícula dentro del artículo para garantizar que los elementos internos estén sincronizados y no se rompan, incluso cuando se aumenta el contenido del artículo.

 

Para hacer que este sistema responda mejor, tuvimos que apuntar a la sección y establecer algunas reglas de consulta de contenedores que se aplican a los artículos como sus descendientes. Puede notar que consultamos la inline-sizepropiedad de la sección porque queremos que los componentes del artículo (secundario) crezcan o se reduzcan en línea con el ancho de la sección (contenedor).

En este caso, hicimos que los artículos se flexionaran en la dirección de la columna cuando el ancho de la sección es como máximo de 80ch. Esto permite que nuestros artículos respondan no al tamaño de la ventana gráfica sino al ancho de su contenedor.

Aquí está el resultado:

 

Conclusión

Este artículo cubrió subcuadrículas de CSS y consultas de contenedores, su funcionamiento y casos de uso. También pudimos experimentar con ambos conceptos y combinarlos para lograr un diseño receptivo. Las consultas de contenedor y las subcuadrículas de CSS se encuentran actualmente en su primer borrador de trabajo público, pero son características que han demostrado ser útiles y es probable que se incorporen en la mayoría de las nuevas versiones de navegador.

Espero que este artículo haya sido valioso para usted. ¡Feliz codificación!

Fuente: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Cómo Usar Consultas De Contenedor Y Subcuadrícula De CSS
Anne  de Morel

Anne de Morel

1656694800

Comment Utiliser Les Sous-grilles CSS Avec Les Requêtes De Conteneur

Si vous travaillez souvent avec CSS, vous avez peut-être rencontré des mises en page placées côte à côte qui se cassent ou se désalignent lorsque la taille d'un côté change. Presque tous les concepteurs de sites Web ont été confrontés à ce problème, et cela peut être frustrant à résoudre. Heureusement, CSS possède des fonctionnalités vous permettant de créer des mises en page Web qui maintiennent l'alignement lorsque leur contenu change ; celles-ci sont appelées les requêtes de sous-grille et de conteneur.

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités qui peuvent considérablement améliorer la conception de la mise en page Web et le développement Web réactif. Cet article plongera profondément dans les sous-grilles CSS en fournissant un didacticiel sur leur utilisation transparente avec des requêtes de conteneur.

Que sont les sous-grilles CSS ?

Les sous-grilles CSS sont une fonctionnalité relativement nouvelle dans l'écosystème CSS, s'avérant être un ajout important aux spécifications de conception et de mise en page de la grille CSS de niveau deux.

Les éléments (composants enfants) que vous construisez et ajustez dans un conteneur de grille traditionnel n'héritent pas directement des lignes et des colonnes de leur composant parent. Cela entraîne des difficultés à les aligner de manière cohérente avec la grille parent, car chaque élément a tendance à agir indépendamment.

Il faut alors gérer deux grilles distinctes, qui peuvent devenir redondantes. Vous pouvez résoudre rapidement ce problème en ajoutant subgridune valeur pour les propriétés grid-template-rowset grid-template-columns, car les composants enfants de la grille peuvent désormais parfaitement se synchroniser avec leur composant parent.

Les sous-grilles CSS permettent aux composants enfants d'hériter de leurs paramètres de ligne et de colonne parents sans conserver leurs paramètres de grille.

Considérez les trois cartes dans un système de grille imbriquée ci-dessous :

Cartes dans un système de grille imbriquée

Regardez ce qui se passe lorsque vous augmentez le contenu de la carte au centre :

Les cartes de grille imbriquées ont augmenté le contenu du centre

 

Vous pouvez immédiatement voir que les positions du titre et du pied de page sont compromises à mesure que le contenu augmente.

Il existe plusieurs façons de traiter ce problème. Pourtant, ils finissent tous par vous obliger à gérer manuellement des grilles individuelles dans des systèmes de grille imbriqués, ce qui peut être problématique lorsque vous travaillez sur une base de code plus grande.

Les sous-grilles fournissent désormais une solution alternative qui permet aux lignes et aux colonnes de conserver leur position initiale dans le système de grille malgré la modification de leur contenu.

D'après mon exemple ci-dessus, l'ajout subgridde la valeur de s de ma carte grid-template-rowproduira une sortie différente :

.card {
  grid-template-rows: subgrid;
}

Voici le résultat :

cartes de sous-réseau

Malgré l'augmentation du contenu de la deuxième carte, les éléments de titre et de pied de page sont toujours parfaitement positionnés et synchronisés avec la grille parent.

La sous-grille est un ajout important aux spécifications de disposition de la grille CSS en raison de la capacité des composants enfants à hériter des propriétés de leurs composants parents et grands-parents. Il est pratique lors de la création de systèmes de grille imbriqués, de mises en page de formulaires parfaitement alignées et d'autres alignements Web éditoriaux.

Actuellement, seul le navigateur Firefox prend en charge la sous-grille CSS, mais les autres navigateurs populaires ne sont pas loin derrière. Vous pouvez vous référer à ce guide pour approfondir les sous-grilles CSS et leurs fonctions.

Que sont les requêtes de conteneur ?

Depuis l'introduction des requêtes multimédias dans les navigateurs, la conception Web réactive a fait un pas de géant dans le futur, car vous pouvez désormais concevoir des mises en page spécifiques pour les fenêtres du navigateur.

C'est formidable, mais les requêtes multimédias ont également révélé un problème de redondance lors de la création de structures Web plus complexes. Par exemple, les composants enveloppés dans une section conteneur qui doivent ajuster leurs propriétés de mise en page principales (telles que la largeur ou la hauteur) pour s'aligner avec un changement dans la fenêtre d'affichage de la page Web peuvent affecter et casser la conception.

Pour résoudre ce problème, maintenez les requêtes multimédias du composant synchronisées avec la section contenante pour vous assurer que votre composant s'affiche bien sur toutes les tailles de fenêtre. Vous pouvez facilement résoudre ce problème avec des requêtes de conteneur, car au lieu des tailles de fenêtre, vous concevez désormais des éléments en fonction de leurs propriétés réelles. Les requêtes de conteneur permettent à n'importe quel composant de répondre selon un conteneur spécifié.

Dans un système de grille, par exemple, les composants enfants peuvent s'aligner sur leur conteneur et déterminer leur comportement et leur réactivité. Vous pouvez modifier leurs styles en fonction de leur position dans le conteneur (et non dans la fenêtre). Bien que vous puissiez toujours structurer des pages Web avec une disposition de grille réactive, l'utilisation de requêtes de conteneur est une approche plus simple de la conception Web réactive.

Comment fonctionnent les requêtes de conteneur ?

La première chose à comprendre à propos des requêtes de conteneur CSS est que, bien que les "conteneurs" soient les éléments interrogés, les règles des requêtes de conteneur n'affectent que les descendants du conteneur. Par exemple, si vous interrogez a main, sectionou peut-être a divcomme conteneur cible, les requêtes de conteneur vous permettront de définir des règles sur la façon dont les éléments qu'ils contiennent changent lorsque la taille du conteneur change.

Vous pouvez créer une requête de conteneur avec @container. Il recherche le contexte de confinement le plus proche :

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Le code ci-dessus est une illustration de l'utilisation des requêtes de conteneur. Il demande simplement au navigateur de modifier la valeur de la flex-directioncolonne de la carte en rowsi la largeur du conteneur est d'au moins 450px.

Les requêtes de conteneur ont été spécifiées pour être incluses dans CSS containment. Trois propriétés les accompagnent :

première.container-type

Cette propriété affecte un conteneur de requête à un élément afin que ses composants enfants puissent interroger plusieurs aspects de ses fonctionnalités de mise en page.

  • sizecrée un conteneur de requêtes pour les requêtes dimensionnelles de blocs et d'axes en ligne. La mise en page, le style et la limitation de la taille sont appliqués à l'élément
  • inline-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe en ligne du conteneur. La mise en page, le style et la taille en ligne de l'élément sont appliqués
  • block-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe de bloc du conteneur. La mise en page, le style et le confinement de la taille des blocs sont appliqués à l'élément
  • styleest pour les requêtes de style et crée un conteneur de requête
  • statecrée un conteneur de requêtes pour les requêtes d'état

2.container-name

Une propriété facultative qui spécifie davantage le nom du conteneur. Cet attribut agit comme une trappe de sortie lorsque nous ne voulons pas cibler le conteneur parent le plus proche.

Considérez le code ci-dessous :

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

Le CSS ci-dessus génère un conteneur avec un nom spécifié ( sidebar) qui ne contient que du contenu sur l'axe en ligne, ce qui signifie que le contenu peut croître autant qu'il le faut sur l'axe du bloc. Vous pouvez ensuite interroger ce conteneur spécifique avec son container-namesemblable :

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Cette propriété est souvent utilisée comme propriété abrégée que vous pouvez utiliser pour définir à la fois container-typeet container-namedans une seule instruction.

Cas d'utilisation pour les requêtes de conteneur

Les requêtes de conteneur conviennent aux composants hautement réutilisables dont la disposition dépend de l'espace de conteneur disponible. Ils peuvent être utilisés dans diverses situations ou ajoutés à plusieurs conteneurs sur la page.

D'autres cas d'utilisation de requête de conteneur incluent :

  • Dispositions adaptables
  • Cartes, éléments de formulaire, bannières et autres composants modulaires
  • Tests de redimensionnement CSS
  • Pagination mobile et desktop avec des fonctionnalités distinctes

La plupart des navigateurs ne prennent toujours pas en charge les requêtes de conteneur, mais vous pouvez facilement tester leurs fonctionnalités sur Google Chrome Canary. Dirigez-vous vers chrome://flagset activezCSS Container Queries :

Activer les requêtes de conteneur CSS

Vous pouvez également expérimenter les requêtes de conteneur sur Mozilla Firefox en accédant à about:configet en activantlayout.css.container-queries :

activation des requêtes de conteneur firefox

Les requêtes de conteneur sont actuellement dans leur premier projet de travail public, mais il s'agit d'une fonctionnalité qui s'est avérée utile et qui sera probablement intégrée à toutes les versions de navigateur.

Utilisation de sous-grilles CSS avec des requêtes de conteneur

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités CSS fascinantes qui, je pense, changeront votre approche de la conception de la mise en page des pages Web et du style réactif, mais comment pouvons-nous les combiner ?

Supposons que nous ayons une section contenant trois articles au format suivant :

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Plaçons maintenant ces articles dans un système de grille imbriquée où les sous-grilles et les requêtes de conteneur peuvent jouer leur rôle :

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

À partir du code CSS ci-dessus, nous avons fait en sorte que les deux premières colonnes prennent autant de place dans un système de grille à deux colonnes que la troisième, qui se trouve juste en dessous. Nous avons ensuite créé une sous-grille à l'intérieur de l'article pour nous assurer que les éléments à l'intérieur sont synchronisés et ne peuvent pas se casser, même lorsque le contenu de l'article est augmenté.

exemple de système de grille de cartes

Pour rendre ce système plus réactif, nous avons dû cibler la section et définir des règles de requête de conteneur qui s'appliquent aux articles en tant que leurs descendants. Vous remarquerez peut-être que nous avons interrogé la inline-sizepropriété de la section parce que nous voulons que les composants de l'article (enfant) grandissent ou rétrécissent en ligne avec la largeur de la section (conteneur).

Dans ce cas, nous avons fait fléchir les articles dans le sens de la colonne lorsque la largeur de la section est au maximum de 80ch. Cela permet à nos articles de répondre non pas à la taille de la fenêtre mais à la largeur de leur conteneur.

Voici le résultat :

conteneur requêtes sous-réseaux travaillant ensemble

Conclusion

Cet article traite des sous-grilles CSS et des requêtes de conteneur, de leur fonctionnement et des cas d'utilisation. Nous avons également pu expérimenter les deux concepts et les combiner pour créer une mise en page réactive. Les requêtes de conteneur et les sous-grilles CSS en sont actuellement à leur premier projet de travail public, mais ce sont des fonctionnalités qui se sont avérées utiles et qui seront probablement intégrées dans la plupart des nouvelles versions de navigateur.

J'espère que cet article vous a été utile. Bon codage !

Source : https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Comment Utiliser Les Sous-grilles CSS Avec Les Requêtes De Conteneur

How to Use CSS Subgrids with Container Queries

If you work with CSS often, you may have experienced layouts placed side-by-side that break or become misaligned when one side’s size changes. Almost every web designer has faced this, and it can be frustrating to resolve. Luckily, CSS has features allowing you to create web layouts that maintain alignment when their content changes; these are called the subgrid and container queries.

CSS subgrid and container queries are two features that can vastly improve web layout design and responsive web development. This article will dive deeply into CSS subgrids by providing a tutorial on seamlessly using them with container queries.

 

See more at: https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

How to Use CSS Subgrids with Container Queries
Zachary Palmer

Zachary Palmer

1656659535

How to Create Circular Progress Bar with HTML, CSS & JavaScript

How To Make Circular Progress Bar | HTML CSS JavaScript - Make a Circular Progress Bar | HTML CSS JavaScript, step-by-step from scratch.

JavaScript Circular Progress bar is used on various websites to show education and experience. I made this circle progress bar with the help of HTML CSS and javascript. In the meantime, I have designed another Progress Bar with the help of Bootstrap.

This design is made much simpler and fully responsive. Here I made three bars. The first is for displaying HTML, the second for CSS, and the third for JavaScript percentages.

First of all, I have given the background color of web page # 0d0c2d. Then I made a box on that web page. I have kept the color of the box and the background color of the webpage the same. 

In this case, we have used a shadow in the box which indicates the size of this box. It has three Circular Progress Bars and each has a percentage and a text. I used color # 36e617 to show progress here. You can use any color you want here.

JavaScript Circular Progress Bar

It is made in a very simple and easy way. Here you can add percentages as you need.

Below I have given a demo section that will help you to better understand how it works. Here you will find the required source code which you can copy and use in your own work.

Circular Progress Bar using HTML, CSS, and JavaScript

If you are a beginner and want to know how to create Circle Progress Bar then follow the tutorial below.

I used some CDN links to make this. The first is JQuery and the second is easyPieChart. I have given the link of these two below. You can copy these links and add them to the head section of your HTML file.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

Step 1: Design the progress bar's background

 First of all, I designed the background of this web page and made a box in it. In this box, I put all the Progress Bar. Webpage background: # 0d0c2d I have given blue and used height 100vh.

<div class="container">
 
</div>
body {
  margin: 0;
  padding: 0;
  justify-content: center;
  height: 100vh;
  color:white;
  background: #0d0c2d;
  font-family: sans-serif;
  display: flex;
}

.container {
  background: #0d0c2d;
  padding: 60px;
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  margin: auto 0;
  box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
              4px 4px 6px rgba(94, 104, 121, 0.288);
}
Design the progress bar's background

Step 2: Add basic information with HTML code 

Now I have added all the elements of this javascript circular progress bar using HTML code. Here data-percent = "" is used to determine the value of your circle progress bar. I have 90% for HTML, 72% for CSS and 81% for JavaScript. If you want to change, you can change the values ​​here.

With this, I have used a text that will help to know which bar is for which work. Now I have executed this Circular Progress Bar using the jQuery code. In order to execute the jquery code, I have first added the jquery CDN link.

  <div class="box">
    <div class="chart" data-percent="90" >90%</div>
    <h2>HTML</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="72" >72%</div>
    <h2>CSS</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="81" >81%</div>
    <h2>JAVASCRIPT</h2>
  </div>
Add basic information with HTML code

Step 3: Activate the progress bar using jquery

➤ First I used size: 160 which will determine the size of this circle.

➤ barColor: "# 36e617" I used which will determine this progressive color. Here I have used green. You can use any other color if you want.

➤ lineWidth: 15 basically helps to determine the size of the color line in this bar.

➤ trackColor: "# 525151" is here mainly for the background of the circular.

➤ I have used animate: 2000, which means it will take 2000 milliseconds (2 seconds) for the animation to take place. As a result, when you open the page, it will take you two seconds to reach the mean you set from zero.

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#36e617",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
});
Activate the progress bar using jquery

Step 4: Design the title

I designed the titles using the following CSS codes.

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}
Design the title

Step 5: Design percentage text

 I designed and positioned the percentage I used here using the CSS codes below. If you have seen the demo, you will understand that the text here is placed in the middle of the progress bar. 

Used text-align: center and position: relative for this. I used font-size: 40px and the color white to make the text sizes a little bigger.

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}
Design percent text

Step 6: Determine the position of the circle

I have specified the position of this circular progress bar using the following codes. For this, I have used position: absolute and left and top zero.

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}
Determine the position of the circle

Step 7: Make it responsive with CSS

 Now, this design is ready to use in any of your websites or project. However, I have made it responsive for all devices using some CSS code below. I have used CSS's @media for this. Then I have determined how it will look for any screen size.

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

Hopefully from this tutorial, you have learned step by step how I have created this circular progress bar using HTML CSS and javaScript

#html #css #javascript #programming #webdev 

How to Create Circular Progress Bar with HTML, CSS & JavaScript
Corey Brooks

Corey Brooks

1656658186

How to Build a Movie Guide App with HTML, CSS & JavaScript

Movie Guide App With HTML, CSS & Javascript - Create a movie guide app with HTML, CSS and Javascript using the OMDb API.

Today’s tutorial will teach us how to create a movie guide app. To build this app, we need HTML, CSS and Javascript. We make use of the Open Movie Database API to fetch the information.

If the input field is empty, we display the message – ‘Please Enter A Movie Name’. In case the movie entered by the user does not exist in the database, we show the message- ‘Movie Not Found’. Finally, if some error occurs while fetching the data from the API, we display the message- ‘Error Occurred.

Project Folder Structure:

Before we start coding, let us take a look at the project folder structure. We create a project folder called – “Movie Guide App”. Inside this folder, we have five files. The first is index.html which is the HTML document.

The next is style.css which is the stylesheet. Next, we have script.js, a script file. We have one more script file called key.js that I have used to store the API key and keep it hidden for privacy reasons. The final file is the star icon SVG.

HTML:

We start with the HTML section. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Movie Guide App</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="search-container">
        <input
          type="text"
          placeholder="Enter movie name heree..."
          id="movie-name"
          value="dark knight"
        />
        <button id="search-btn">Search</button>
      </div>
      <div id="result"></div>
    </div>
    <script src="key.js"></script>
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style these elements using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(#000000 50%, #ffb92a 50%);
}
.container {
  font-size: 16px;
  width: 90vw;
  max-width: 37.5em;
  padding: 3em 1.8em;
  background-color: #201f28;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.6em;
  box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2);
}
.search-container {
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1.2em;
}
.search-container input,
.search-container button {
  font-size: 0.9em;
  outline: none;
  border-radius: 0.3em;
}
.search-container input {
  background-color: transparent;
  border: 1px solid #a0a0a0;
  padding: 0.7em;
  color: #ffffff;
}
.search-container input:focus {
  border-color: #ffffff;
}
.search-container button {
  background-color: #ffb92a;
  border: none;
  cursor: pointer;
}
#result {
  color: #ffffff;
}
.info {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 8fr;
  align-items: center;
  margin-top: 1.2em;
}
.poster {
  width: 100%;
}
h2 {
  text-align: center;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin: 0.6em 0 0.9em 0;
}
.rating img {
  width: 1.2em;
}
.rating h4 {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 500;
}
.details {
  display: flex;
  font-size: 0.95em;
  gap: 1em;
  justify-content: center;
  color: #a0a0a0;
  margin: 0.6em 0;
  font-weight: 300;
}
.genre {
  display: flex;
  justify-content: space-around;
}
.genre div {
  border: 1px solid #a0a0a0;
  font-size: 0.75em;
  padding: 0.4em 1.6em;
  border-radius: 0.4em;
  font-weight: 300;
}
h3 {
  font-weight: 500;
  margin-top: 1.2em;
}
p {
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.8em;
  text-align: justify;
  color: #a0a0a0;
}
.msg {
  text-align: center;
}
@media screen and (max-width: 600px) {
  .container {
    font-size: 14px;
  }
  .info {
    grid-template-columns: 1fr;
  }
  .poster {
    margin: auto;
    width: auto;
    max-height: 10.8em;
  }
}

Javascript:

Finally, we add functionality to this code using Javascript. To do this, copy the code below and paste it into your script file.

//Initial References
let movieNameRef = document.getElementById("movie-name");
let searchBtn = document.getElementById("search-btn");
let result = document.getElementById("result");

//Function to fetch data from API
let getMovie = () => {
  let movieName = movieNameRef.value;
  let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`;
  //If input field is empty
  if (movieName.length <= 0) {
    result.innerHTML = `<h3 class="msg">Please Enter A Movie Name</h3>`;
  }
  //If input field is NOT empty
  else {
    fetch(url)
      .then((resp) => resp.json())
      .then((data) => {
        //If movie exists in database
        if (data.Response == "True") {
          result.innerHTML = `
            <div class="info">
                <img src=${data.Poster} class="poster">
                <div>
                    <h2>${data.Title}</h2>
                    <div class="rating">
                        <img src="star-icon.svg">
                        <h4>${data.imdbRating}</h4>
                    </div>
                    <div class="details">
                        <span>${data.Rated}</span>
                        <span>${data.Year}</span>
                        <span>${data.Runtime}</span>
                    </div>
                    <div class="genre">
                        <div>${data.Genre.split(",").join("</div><div>")}</div>
                    </div>
                </div>
            </div>
            <h3>Plot:</h3>
            <p>${data.Plot}</p>
            <h3>Cast:</h3>
            <p>${data.Actors}</p>
            
        `;
        }
        //If movie does NOT exists in database
        else {
          result.innerHTML = `<h3 class='msg'>${data.Error}</h3>`;
        }
      })
      //If error occurs
      .catch(() => {
        result.innerHTML = `<h3 class="msg">Error Occured</h3>`;
      });
  }
};
searchBtn.addEventListener("click", getMovie);
window.addEventListener("load", getMovie);

Next, go to this link. Submit the form and you will receive your API key at your email address. Copy the API key and save it as a global variable key in the key.js file.

//Enter the API key recieved on your email here
key = "12345a6b";

That’s it for this tutorial. If you have any issues while creating this code, you can download the source code

Happy Coding.

#html #css #javascript 

How to Build a Movie Guide App with HTML, CSS & JavaScript
Sean Wade

Sean Wade

1656574500

HTML, CSS & JavaScript Tutotrial - "COPY LINK" Input Field

How to Create a "COPY LINK" Input Field with HTML, CSS & JavaScript

In today's tutorial we'll be creating a "Copy Link" input field using HTML, CSS and JavaScript. This is very easy to do and is a huge convenience to your users when performing an action like sharing a link.

HTML

<div class="copy-link">
  <input type="text" class="copy-link-input" value="https://www.youtube.com/" readonly>
  <button type="button" class="copy-link-button">
    <span class="material-icons">content_copy</span>
  </button>
</div>

CSS

.copy-link {
  --height: 36px;

  display: flex;
  max-width: 250px;
}

.copy-link-input {
  flex-grow: 1;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid #cccccc;
  border-right: none;
  outline: none;
}

.copy-link-input:hover {
  background: #eeeeee;
}

.copy-link-button {
  flex-shrink: 0;
  width: var(--height);
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dddddd;
  color: #333333;
  outline: none;
  border: 1px solid #cccccc;
  cursor: pointer;
}

.copy-link-button:hover {
  background: #cccccc;
}

JavaScript

document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
  const inputField = copyLinkParent.querySelector(".copy-link-input");
  const copyButton = copyLinkParent.querySelector(".copy-link-button");
  const text = inputField.value;

  inputField.addEventListener("focus", () => inputField.select());

  copyButton.addEventListener("click", () => {
    inputField.select();
    navigator.clipboard.writeText(text);

    inputField.value = "Copied!";
    setTimeout(() => (inputField.value = text), 2000);
  });
});

MATERIAL ICONS INSTALL:
https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts 

MATERIAL ICONS LIBRARY:
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.query=copy 

GET THE SOURCE CODE 👇
https://codepen.io/dcode-software/pen/eYMYXrK 

#html #css #javascript

HTML, CSS & JavaScript Tutotrial - "COPY LINK" Input Field

How to Create a Recipe App with HTML, CSS & JavaScript

In this guide, we will learn how to create a Recipe app with HTML, CSS & JavaScript. To create a Recipe App with HTML, CSS & JavaScript. You need to create three Files HTML, CSS & JavaScript.

1: First, create an HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recipe App</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="search-container">
        <input
          type="text"
          placeholder="Type A Dish Name Here.."
          id="user-inp"
        />
        <button id="search-btn">Search</button>
      </div>
      <div id="result"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

 

2: Second, create a CSS file

 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #f4c531;
}
.container {
  background-color: #ffffff;
  font-size: 16px;
  padding: 3em 2.8em;
  width: 90vw;
  max-width: 32em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.6em;
}
.search-container {
  width: 100%;
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1.2em;
}
.search-container input {
  font-size: 1em;
  padding: 0.6em;
  border: none;
  outline: none;
  border-bottom: 2px solid #202030;
}
.search-container button {
  font-size: 1em;
  background-color: #f4c531;
  border: none;
  font-weight: 600;
  border-radius: 0.3em;
}
img {
  display: block;
  width: 50%;
  margin: 1.8em auto 0 auto;
}
.details {
  background-color: #f4c531;
  position: relative;
  margin: -4.3em 0 0 0;
  text-align: center;
  padding: 0.6em 0;
}
.details h2 {
  font-size: 1.2em;
  font-weight: 600;
}
.details h4 {
  font-size: 1em;
  font-weight: 400;
}
#show-recipe {
  font-size: 1em;
  position: relative;
  left: 75%;
  padding: 0.9em 0.6em;
  background-color: #f4c531;
  border: none;
  top: 1.5em;
  border-radius: 0.3em;
  font-weight: 600;
}
#recipe {
  position: absolute;
  background-color: #ffffff;
  min-height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0.6em;
  display: none;
}
#recipe pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 2.5em 1.2em 1.2em 1.2em;
  font-size: 0.92em;
  color: #303040;
}
#hide-recipe {
  font-size: 1em;
  position: relative;
  width: 1.8em;
  height: 1.8em;
  background-color: #f4c531;
  border: none;
  top: 1.2em;
  left: 90%;
  border-radius: 0.3em;
}
ul {
  font-size: 1em;
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.8em 1.1em;
  padding: 1.2em 0 0 1.2em;
  color: #303040;
  text-transform: capitalize;
}
h3 {
  text-align: center;
  margin-top: 1.8em;
  color: #202030;
}
@media screen and (max-width: 500px) {
  .container {
    font-size: 14px;
  }
}

 

3: Last, create a JavaScript file

 

//Initial References
let result = document.getElementById("result");
let searchBtn = document.getElementById("search-btn");
let url = "https://www.themealdb.com/api/json/v1/1/search.php?s=";

searchBtn.addEventListener("click", () => {
  let userInp = document.getElementById("user-inp").value;
  if (userInp.length == 0) {
    result.innerHTML = `<h3>Input Field Cannot Be Empty</h3>`;
  } else {
    fetch(url + userInp)
      .then((response) => response.json())
      .then((data) => {
        let myMeal = data.meals[0];
        console.log(myMeal);
        console.log(myMeal.strMealThumb);
        console.log(myMeal.strMeal);
        console.log(myMeal.strArea);
        console.log(myMeal.strInstructions);
        let count = 1;
        let ingredients = [];
        for (let i in myMeal) {
          let ingredient = "";
          let measure = "";
          if (i.startsWith("strIngredient") && myMeal[i]) {
            ingredient = myMeal[i];
            measure = myMeal[`strMeasure` + count];
            count += 1;
            ingredients.push(`${measure} ${ingredient}`);
          }
        }
        console.log(ingredients);

        result.innerHTML = `
    <img src=${myMeal.strMealThumb}>
    <div class="details">
        <h2>${myMeal.strMeal}</h2>
        <h4>${myMeal.strArea}</h4>
    </div>
    <div id="ingredient-con"></div>
    <div id="recipe">
        <button id="hide-recipe">X</button>
        <pre id="instructions">${myMeal.strInstructions}</pre>
    </div>
    <button id="show-recipe">View Recipe</button>
    `;
        let ingredientCon = document.getElementById("ingredient-con");
        let parent = document.createElement("ul");
        let recipe = document.getElementById("recipe");
        let hideRecipe = document.getElementById("hide-recipe");
        let showRecipe = document.getElementById("show-recipe");

        ingredients.forEach((i) => {
          let child = document.createElement("li");
          child.innerText = i;
          parent.appendChild(child);
          ingredientCon.appendChild(parent);
        });

        hideRecipe.addEventListener("click", () => {
          recipe.style.display = "none";
        });
        showRecipe.addEventListener("click", () => {
          recipe.style.display = "block";
        });
      })
      .catch(() => {
        result.innerHTML = `<h3>Invalid Input</h3>`;
      });
  }
});

Now you’ve successfully a Recipe App with HTML, CSS & JavaScript.

#html #css #javascript 

How to Create a Recipe App with HTML, CSS & JavaScript

How to Detect the Battery Status with HTML, CSS & JavaScript

In this guide, we will learn how to detect the battery status with HTML, CSS & JavaScript. To detect the battery status with HTML, CSS & JavaScript. You need to create three Files HTML, CSS & JavaScript 

1: First, create an HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detect Battery Status</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="battery">
        <div id="charge"></div>
        <div id="charge-level"></div>
      </div>
      <div id="charging-time"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

 

2: Second, create a CSS file

 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#battery {
  box-sizing: content-box;
  height: 7.8em;
  width: 17.5em;
  border: 0.6em solid #246aed;
  margin: auto;
  border-radius: 0.6em;
  position: relative;
  display: grid;
  place-items: center;
}
#battery:before {
  position: absolute;
  content: "";
  height: 5em;
  width: 1.1em;
  background-color: #246aed;
  margin: auto;
  top: 0;
  bottom: 0;
  right: -1.6em;
  border-radius: 0 0.3em 0.3em 0;
}
#charge {
  position: absolute;
  height: 6.5em;
  width: 16.25em;
  background-color: #246aed;
  top: 0.6em;
  left: 0.6em;
}
#charge-level {
  position: absolute;
  font-size: 3em;
  font-weight: 500;
}
#charging-time {
  text-align: center;
  font-size: 1.7em;
  margin-top: 1.4em;
}
.active {
  animation: charge-animation 3s infinite linear;
}
@keyframes charge-animation {
  0% {
    width: 0;
  }
  100% {
    width: 16.25em;
  }
}

 

3: Last, create a JavaScript file

 

const chargeLevel = document.getElementById("charge-level");
const charge = document.getElementById("charge");
const chargingTimeRef = document.getElementById("charging-time");

window.onload = () => {
  //For browsers that don't support the battery status API
  if (!navigator.getBattery) {
    alert("Battery Status Api Is Not Supported In Your Browser");
    return false;
  }
};

navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargingInfo();
    updateLevelInfo();
  }
  updateAllBatteryInfo();

  //When the charging status changes
  battery.addEventListener("chargingchange", () => {
    updateAllBatteryInfo();
  });

  //When the Battery Levvel Changes
  battery.addEventListener("levelchange", () => {
    updateAllBatteryInfo();
  });

  function updateChargingInfo() {
    if (battery.charging) {
      charge.classList.add("active");
      chargingTimeRef.innerText = "";
    } else {
      charge.classList.remove("active");

      //Display time left to discharge only when it is a integer value i.e not infinity
      if (parseInt(battery.dischargingTime)) {
        let hr = parseInt(battery.dischargingTime / 3600);
        let min = parseInt(battery.dischargingTime / 60 - hr * 60);
        chargingTimeRef.innerText = `${hr}hr ${min}mins remaining`;
      }
    }
  }

  //Updating battery level
  function updateLevelInfo() {
    let batteryLevel = `${parseInt(battery.level * 100)}%`;
    charge.style.width = batteryLevel;
    chargeLevel.textContent = batteryLevel;
  }
});

You have now successfully created a battery health detection app using HTML, CSS & JavaScript

#html #css  #javascript 

How to Detect the Battery Status with HTML, CSS & JavaScript