files/sidebars/cssref.yaml

# Do not add comments to this file. They will be lost.

sidebar:
  - type: section
    link: /Web/CSS
    title: CSS
  - type: section
    link: /Web/CSS/Guides
    title: Guides
  - type: listSubPages
    path: /Web/CSS/Guides
    tags: css-module
    title: Modules
    details: closed
  - title: Anchor_positioning
    details: closed
    children:
      - /Web/CSS/Guides/Anchor_positioning/Using
      - /Web/CSS/Guides/Anchor_positioning/Try_options_hiding
  - title: Animations
    details: closed
    children:
      - /Web/CSS/Guides/Animations/Animatable_properties
      - /Web/CSS/Guides/Animations/Using
  - title: Backgrounds_and_Borders
    details: closed
    children:
      - /Web/CSS/Guides/Backgrounds_and_borders/Using_multiple_backgrounds
      - /Web/CSS/Guides/Backgrounds_and_borders/Resizing_background_images
      - /Web/CSS/Guides/Backgrounds_and_borders/Scaling_SVG_backgrounds
  - title: Box alignment
    details: closed
    children:
      - /Web/CSS/Guides/Box_alignment/Overview
      - /Web/CSS/Guides/Box_alignment/In_block_abspos_tables
      - /Web/CSS/Guides/Box_alignment/In_flexbox
      - /Web/CSS/Guides/Box_alignment/In_grid_layout
      - /Web/CSS/Guides/Box_alignment/In_multi-column_layout
  - title: Box_model
    details: closed
    children:
      - /Web/CSS/Guides/Box_model/Introduction
      - /Web/CSS/Guides/Box_model/Margin_collapsing
  - title: Box sizing
    details: closed
    children:
      - /Web/CSS/Guides/Box_sizing/Aspect_ratios
  - title: Cascade
    details: closed
    children:
      - /Web/CSS/Guides/Cascade/Introduction
      - /Web/CSS/Guides/Cascade/Inheritance
      - /Web/CSS/Guides/Cascade/Specificity
      - /Web/CSS/Guides/Cascade/Property_value_processing
      - /Web/CSS/Guides/Cascade/Shorthand_properties
  - type: listSubPages
    path: /Web/CSS/Guides/Cascading_variables
    title: Cascading variables
    details: closed
  - title: Colors
    details: closed
    children:
      - /Web/CSS/Guides/Colors/Applying_color
      - /Web/CSS/Guides/Colors/Color_values
      - /Web/CSS/Guides/Colors/Using_relative_colors
      - /Web/CSS/Guides/Colors/Using_color_wisely
      - link: /Web/Accessibility/Guides/Colors_and_Luminance
        title: Accessibility_Understanding_colors_and_luminance
      - link: /Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast
        title: Color_contrast
  - title: Columns
    details: closed
    children:
      - /Web/CSS/Guides/Multicol_layout/Basic_concepts
      - /Web/CSS/Guides/Multicol_layout/Styling_columns
      - /Web/CSS/Guides/Multicol_layout/Using
      - /Web/CSS/Guides/Multicol_layout/Spanning_balancing_columns
      - /Web/CSS/Guides/Multicol_layout/Handling_overflow
      - /Web/CSS/Guides/Multicol_layout/Handling_content_breaks
  - title: Conditional_rules
    details: closed
    children:
      - /Web/CSS/Guides/Conditional_rules/Using_feature_queries
      - /Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries
  - title: Containment
    details: closed
    children:
      - /Web/CSS/Guides/Containment/Container_queries
      - /Web/CSS/Guides/Containment/Using
      - /Web/CSS/Guides/Containment/Container_size_and_style_queries
  - title: CSSOM_view
    details: closed
    children:
      - link: /Web/API/CSSOM_view_API/Coordinate_systems
        title: Coordinate_systems
      - /Web/CSS/Guides/CSSOM_view/Viewport_concepts
  - type: listSubPages
    path: /Web/CSS/Guides/Custom_functions_and_mixins
    title: Custom_functions_and_mixins
    details: closed
  - title: Display
    details: closed
    children:
      - /Web/CSS/Guides/Display/Block_and_inline_layout
      - /Web/CSS/Guides/Display/Flow_layout
      - /Web/CSS/Guides/Display/Flow_layout_and_overflow
      - /Web/CSS/Guides/Display/Flow_layout_and_writing_modes
      - /Web/CSS/Guides/Display/In_flow_and_out_of_flow
      - /Web/CSS/Guides/Display/Containing_block
      - /Web/CSS/Guides/Display/Formatting_contexts
      - /Web/CSS/Guides/Display/Block_formatting_context
      - /Web/CSS/Guides/Inline_layout/Inline_formatting_context
      - /Web/CSS/Guides/Display/Multi-keyword_syntax
      - /Web/CSS/Guides/Display/Visual_formatting_model
  - type: listSubPages
    path: /Web/CSS/Guides/Environment_variables
    title: Environment_variables
    details: closed
  - type: listSubPages
    path: /Web/CSS/Guides/Filter_effects
    title: Filter_effects
    details: closed
  - title: Flexbox
    details: closed
    children:
      - /Web/CSS/Guides/Flexible_box_layout/Basic_concepts
      - /Web/CSS/Guides/Flexible_box_layout/Relationship_with_other_layout_methods
      - /Web/CSS/Guides/Flexible_box_layout/Aligning_items
      - /Web/CSS/Guides/Flexible_box_layout/Ordering_items
      - /Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios
      - /Web/CSS/Guides/Flexible_box_layout/Wrapping_items
      - /Web/CSS/Guides/Flexible_box_layout/Use_cases
  - type: listSubPages
    path: /Web/CSS/Guides/Fonts
    title: Fonts
    details: closed
  - title: Grid
    details: closed
    children:
      - /Web/CSS/Guides/Grid_layout/Basic_concepts
      - /Web/CSS/Guides/Grid_layout/Relationship_with_other_layout_methods
      - /Web/CSS/Guides/Grid_layout/Line-based_placement
      - /Web/CSS/Guides/Grid_layout/Grid_template_areas
      - /Web/CSS/Guides/Grid_layout/Named_grid_lines
      - /Web/CSS/Guides/Grid_layout/Auto-placement
      - /Web/CSS/Guides/Grid_layout/Box_alignment
      - /Web/CSS/Guides/Grid_layout/Logical_values_and_writing_modes
      - /Web/CSS/Guides/Grid_layout/Accessibility
      - /Web/CSS/Guides/Grid_layout/Common_grid_layouts
      - /Web/CSS/Guides/Grid_layout/Subgrid
      - /Web/CSS/Guides/Grid_layout/Masonry_layout
  - title: Images
    details: closed
    children:
      - /Web/CSS/Guides/Images/Using_gradients
      - /Web/CSS/Guides/Images/Using_object-view-box
      - /Web/CSS/Guides/Images/Replaced_element_properties
      - /Web/CSS/Guides/Images/Implementing_image_sprites
  - title: Lists_and_counters
    details: closed
    children:
      - /Web/CSS/Guides/Counter_styles/Using_counters
      - /Web/CSS/Guides/Lists/Indenting
  - title: Logical_properties
    details: closed
    children:
      - /Web/CSS/Guides/Logical_properties_and_values/Basic_concepts
      - /Web/CSS/Guides/Logical_properties_and_values/Floating_and_positioning
      - /Web/CSS/Guides/Logical_properties_and_values/Margins_borders_padding
      - /Web/CSS/Guides/Logical_properties_and_values/Sizing
  - title: Masking
    details: closed
    children:
      - /Web/CSS/Guides/Masking/Introduction
      - /Web/CSS/Guides/Masking/Clipping
      - /Web/CSS/Guides/Masking/Multiple_masks
      - /Web/CSS/Guides/Masking/Mask_properties
  - title: Media_queries
    details: closed
    children:
      - /Web/CSS/Guides/Media_queries/Using
      - /Web/CSS/Guides/Media_queries/Using_for_accessibility
      - /Web/CSS/Guides/Media_queries/Testing
      - /Web/CSS/Guides/Media_queries/Printing
  - title: Nesting
    details: closed
    children:
      - /Web/CSS/Guides/Nesting/At-rules
      - /Web/CSS/Guides/Nesting/Nesting_and_specificity
      - /Web/CSS/Guides/Nesting/Using
  - type: listSubPages
    path: /Web/CSS/Guides/Overflow
    title: Overflow
    details: closed
  - title: Positioning
    details: closed
    children:
      - /Web/CSS/Guides/Positioned_layout/Stacking_context
      - /Web/CSS/Guides/Positioned_layout/Stacking_context/Example_1
      - /Web/CSS/Guides/Positioned_layout/Stacking_context/Example_2
      - /Web/CSS/Guides/Positioned_layout/Stacking_context/Example_3
      - /Web/CSS/Guides/Positioned_layout/Stacking_floating_elements
      - /Web/CSS/Guides/Positioned_layout/Understanding_z-index
      - /Web/CSS/Guides/Positioned_layout/Using_z-index
      - /Web/CSS/Guides/Positioned_layout/Stacking_without_z-index
  - type: listSubPages
    path: /Web/CSS/Guides/Scroll_anchoring
    title: Scroll_anchoring
    details: closed
  - type: listSubPages
    path: /Web/CSS/Guides/Scroll-driven_animations
    title: Scroll-driven_animations
    details: closed
  - type: listSubPages
    path: /Web/CSS/Guides/Scroll_snap
    title: Scroll_snap
    details: closed
  - title: Selectors
    details: closed
    children:
      - /Web/CSS/Guides/Selectors/Selectors_and_combinators
      - /Web/CSS/Guides/Selectors/Selector_structure
      - /Web/CSS/Guides/Selectors/Privacy_and_:visited
      - /Web/CSS/Guides/Selectors/Using_:target
  - title: Shapes
    details: closed
    children:
      - /Web/CSS/Guides/Shapes/Overview
      - /Web/CSS/Guides/Shapes/From_box_values
      - /Web/CSS/Guides/Shapes/From_images
      - /Web/CSS/Guides/Shapes/Using_shape-outside
  - title: Syntax
    details: closed
    children:
      - /Web/CSS/Guides/Syntax/Introduction
      - /Web/CSS/Guides/Syntax/Comments
      - /Web/CSS/Guides/Syntax/At-rules
      - /Web/CSS/Guides/Syntax/Error_handling
  - title: Text
    details: closed
    children:
      - /Web/CSS/Guides/Text/Wrapping_breaking_text
      - /Web/CSS/Guides/Text/Whitespace
  - title: Text decoration
    details: closed
    children:
      - /Web/CSS/Guides/Text_decoration/Text_shadows
  - title: Transforms
    details: closed
    children:
      - /Web/CSS/Guides/Transforms/Using
  - title: Transitions
    details: closed
    children:
      - /Web/CSS/Guides/Transitions/Using
  - title: Values and units
    details: closed
    children:
      - /Web/CSS/Guides/Values_and_units/Value_definition_syntax
      - /Web/CSS/Guides/Values_and_units/Numeric_data_types
      - /Web/CSS/Guides/Values_and_units/Textual_data_types
      - /Web/CSS/Guides/Values_and_units/Using_math_functions
      - /Web/CSS/Guides/Values_and_units/Using_typed_arithmetic
  - title: Writing modes
    details: closed
    children:
      - /Web/CSS/Guides/Writing_modes/Writing_mode_systems
      - /Web/CSS/Guides/Writing_modes/Vertical_controls
  - type: section
    link: /Web/CSS/How_to
  - link: /Web/CSS/How_to/Layout_cookbook
    title: Layout cookbook
    details: closed
    children:
      - /Web/CSS/How_to/Layout_cookbook/Media_objects
      - /Web/CSS/How_to/Layout_cookbook/Column_layouts
      - /Web/CSS/How_to/Layout_cookbook/Center_an_element
      - /Web/CSS/How_to/Layout_cookbook/Sticky_footers
      - /Web/CSS/How_to/Layout_cookbook/Split_navigation
      - /Web/CSS/How_to/Layout_cookbook/Breadcrumb_navigation
      - /Web/CSS/How_to/Layout_cookbook/List_group_with_badges
      - /Web/CSS/How_to/Layout_cookbook/Pagination
      - /Web/CSS/How_to/Layout_cookbook/Card
      - /Web/CSS/How_to/Layout_cookbook/Grid_wrapper
      - link: /Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe
        title: Contribute a recipe
        details: closed
        children:
          - /Web/CSS/How_to/Layout_cookbook/Contribute_a_recipe/Cookbook_template
  - type: section
    title: Tools
  - children:
      - /Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator
      - /Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator
      - /Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator
      - /Web/CSS/Guides/Colors/Color_format_converter
      - /Web/CSS/Guides/Colors/Color_mixer
      - /Web/CSS/Guides/Shapes/Shape_generator
  - type: section
    link: /Web/CSS/Reference
  - type: listSubPagesGrouped
    path: /Web/CSS/Reference/Properties
    tags:
      - css-property
      - css-shorthand-property
    link: /Web/CSS/Reference/Properties
    title: Properties
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/Selectors
    tags: css-selector
    link: /Web/CSS/Reference/Selectors
    title: Selectors
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/Selectors
    tags: css-combinator
    link: /Web/CSS/Reference/Selectors/Combinators
    title: Combinators
    details: closed
  - type: listSubPagesGrouped
    path: /Web/CSS/Reference/Selectors
    tags: css-pseudo-class
    link: /Web/CSS/Reference/Selectors/Pseudo-classes
    title: Pseudo-classes
    details: closed
  - type: listSubPagesGrouped
    path: /Web/CSS/Reference/Selectors
    tags: css-pseudo-element
    link: /Web/CSS/Reference/Selectors/Pseudo-elements
    title: Pseudo-elements
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/At-rules
    tags: css-at-rule
    link: /Web/CSS/Reference/At-rules
    title: At-rules
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/Values
    tags: css-keyword
    link: /Web/CSS/Reference/Values
    title: Values
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/Values
    tags: css-type
    link: /Web/CSS/Reference/Values/Data_types
    title: Types
    details: closed
  - type: listSubPages
    path: /Web/CSS/Reference/Values
    tags: css-function
    depth: 2
    link: /Web/CSS/Reference/Values/Functions
    title: Functions
    details: closed
l10n:
  de:
    Guides: Leitfäden
    Animations: Animationen
    Accessibility_Understanding_colors_and_luminance: "Barrierefreiheit: Farbwerte verstehen"
    At-rules: At-Regeln
    Backgrounds_and_Borders: Hintergründe und Rahmen
    Box alignment: Box-Ausrichtung
    Box_model: Box-Modell
    Colors: Farben
    Color_contrast: "Barrierefreiheit: Farbkontrast"
    Columns: Spalten
    Combinators: Kombinatoren
    Conditional_rules: Bedingte Regeln
    Containment: Containment
    CSSOM_view: CSSOM-Ansicht
    Display: Display
    Flexbox: Flexbox
    Fonts: Schriftarten
    Functions: Funktionen
    Grid: Raster
    Images: Bilder
    Lists_and_counters: Listen und Zähler
    Logical_properties: Logische Eigenschaften
    Media_queries: Media-Abfragen
    Modules: Module
    Nesting: Verschachteln von Stilregeln
    Positioning: Positionierung
    Pseudo-classes: Pseudo-Klassen
    Pseudo-elements: Pseudo-Elemente
    Properties: Eigenschaften
    Scroll_snap: Scroll-Snap
    Selectors: Selektoren
    Shapes: Formen
    Text: Text
    Transforms: Transformationen
    Transitions: Übergänge
    Tools: Werkzeuge
    Types: Typen
  en-US:
    Accessibility_Understanding_colors_and_luminance: "Accessibility: Colors and luminance"
    Guides: Guides
    Anchor_positioning: Anchor positioning
    Animations: Animations
    Backgrounds_and_Borders: Backgrounds and borders
    Box_model: Box model
    Cascade: Cascade
    Colors: Colors
    Color_contrast: "Accessibility: Color contrast"
    Columns: Columns
    Conditional_rules: Conditional rules
    Containment: Containment
    Coordinate_systems: Coordinate systems (API)
    CSSOM_view: CSSOM view
    Custom_functions_and_mixins: Custom functions and mixins
    Display: Display
    Environment_variables: Environment variables
    Filter_effects: Filter effects
    Flexbox: Flexbox
    Fonts: Fonts
    Grid: Grid
    Images: Images
    Lists_and_counters: Lists and counters
    Logical_properties: Logical properties
    Media_queries: Media queries
    Nesting: Nesting style rules
    Overflow: Overflow
    Positioning: Positioning
    Selectors: Selectors
    Scroll_anchoring: Scroll anchoring
    Scroll-driven_animations: Scroll-driven animations
    Scroll_snap: Scroll snap
    Shapes: Shapes
    Syntax: Syntax
    Text: Text
    Transforms: Transforms
    Transitions: Transitions
    Tools: Tools
  fr:
    Guides: Guides
    Animations: Animations
    Backgrounds_and_Borders: Arrière-plans et bordures
    Box_model: Modèle de boîte
    Columns: Colonnes
    Conditional_rules: Règles conditionnelles
    CSSOM_view: Vue CSSOM
    Flexbox: Boîtes flexibles
    Display: Mis en page
    Fonts: Polices
    Grid: Grille
    Images: Images
    Lists_and_counters: Listes et compteurs
    Logical_properties: Propriétés logiques
    Media_queries: Requêtes média
    Positioning: Positionnement
    Scroll_snap: Ancrage du défilement
    Shapes: Formes
    Text: Texte
    Transforms: Transformations
    Transitions: Transitions
    Tools: Outils
  ja:
    Accessibility_Understanding_colors_and_luminance: "アクセシビリティ: 色と輝度"
    At-rules: アットルール
    Guides: ガイド
    Anchor_positioning: アンカー位置指定
    Animations: アニメーション
    Backgrounds_and_Borders: 背景と境界
    Box alignment: ボックス配置
    Box_model: ボックスモデル
    Cascade: カスケード
    Colors: 色
    Color_contrast: "アクセシビリティ: 色のコントラスト"
    Columns: 段組み
    Combinators: 結合子
    Conditional_rules: 条件付きルール
    Containment: コンテナー
    CSSOM_view: CSSOM view
    Display: 表示方法
    Filter_effects: フィルター効果
    Flexbox: フレックスボックス
    Fonts: フォント
    Functions: 関数
    Grid: グリッド
    Images: 画像
    Lists_and_counters: リストとカウンター
    Logical_properties: 論理的プロパティ
    Media_queries: メディアクエリー
    Modules: モジュール
    Nesting: 入れ子のスタイルルール
    Overflow: オーバーフロー
    Positioning: 位置指定
    Properties: プロパティ
    Pseudo-classes: 擬似クラス
    Pseudo-elements: 擬似要素
    Scroll_anchoring: スクロールアンカリング
    Scroll_snap: スクロールスナップ
    Selectors: セレクター
    Shapes: シェイプ
    Syntax: 構文
    Text: テキスト
    Text decoration: テキスト装飾
    Transforms: 座標変換
    Transitions: トランジション
    Tools: ツール
    Types: データ型
    Values and units: 値と単位
  ko:
    Guides: 안내서
    Animations: 애니메이션
    Backgrounds_and_Borders: 배경과 보더
    Box_model: 박스 모델
    Columns: 열
    Conditional_rules: CSS에서 규칙 정의하기
    CSSOM_view: CSSOM view
    Display: 플로 레이아웃
    Flexbox: 플렉스박스
    Fonts: 글꼴
    Grid: 그리드
    Images: 이미지
    Lists_and_counters: 리스트와 카운터
    Logical_properties: Logical 속성
    Media_queries: 미디어 쿼리
    Positioning: 위치 잡기
    Scroll_snap: 스크롤 스냅
    Shapes: 도형
    Text: 텍스트
    Transforms: 변형
    Transitions: 트랜지션
    Tools: 도구
  pt-BR:
    Flexbox: Flexbox
    Positioning: Posicionamento
  ru:
    Guides: Руководства
    Animations: Анимации
    Backgrounds_and_Borders: Фоны и границы
    Box_model: Блочная модель
    Columns: Колонки
    Conditional_rules: Условные конструкции
    CSSOM_view: CSSOM View
    Display: Потоковая раскладка
    Flexbox: Флексбокс
    Fonts: Шрифты
    Grid: Грид
    Images: Изображения
    Lists_and_counters: Списки и счетчики
    Logical_properties: Логические свойства
    Media_queries: Медиа-запросы
    Positioning: Позиционирование
    Scroll_snap: Scroll snap
    Shapes: Фигуры
    Text: Текст
    Transforms: Трансформации
    Transitions: Переходы
    Tools: Инструменты
  zh-CN:
    Containment: CSS 局限
    Combinators: 关系选择器
    Guides: 指南
    Anchor_positioning: 锚点定位
    Animations: 动画
    At-rules: At 规则
    Backgrounds_and_Borders: 背景和边框
    Box alignment: 盒对齐
    Box_model: 盒模型
    Cascade: 层叠
    Colors: 颜色
    Color_contrast: Web 无障碍：色彩对比度
    Columns: 多列
    Conditional_rules: 条件规则
    CSSOM_view: CSS 对象模型视图
    Display: 流式布局
    Filter_effects: 滤镜效果
    Flexbox: 弹性盒布局
    Fonts: 字体
    Functions: 函数
    Grid: 网格布局
    Images: 图片
    Lists_and_counters: 列表和计数器
    Logical_properties: 逻辑属性
    Media_queries: 媒体查询
    Nesting: 嵌套样式规则
    Overflow: 溢出
    Positioning: 定位
    Scroll_anchoring: 滚动锚定
    Scroll_snap: 滚动吸附
    Shapes: 形状
    Syntax: 语法
    Text: 文本
    Transforms: 变换
    Transitions: 过渡
    Tools: 工具
    Accessibility_Understanding_colors_and_luminance: 无障碍：理解颜色和亮度
    Modules: 模块
    Pseudo-classes: 伪类
    Pseudo-elements: 伪元素
    Properties: 属性
    Selectors: 选择器
    Types: 类型
    Values and units: 值和单位
  zh-TW:
    Flexbox: 彈性區塊
    Positioning: 定位