- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Media Features - Color
CSS media feature color tests the number of bits per color component such as red, green, and blue of the output device.
CSS color media is a range feature, which means that you can also use the prefixed min-color and max-color variants to query minimum and maximum values, respectively.
Possible Values
<integer> − It defines the bit depth used to represent individual colors (such as red, green, and blue) that an output device can display.
Syntax
@media (color:<integer>) { //css style }
When representing color components, it uses the smallest number of bits required to represent each color component. A display that uses 5 bits for blue and red and 6 bits for green is considered to have 5 bits per color component. If the display uses indexed colors, then it uses the smallest number of bits used to represent a color in the color table.
CSS color - Basic Example
The following example demonstrates that the CSS color media feature to change the text color of the <p> element to red if the output device can display more than 0 colors −
<html> <head> <style> div { color: blue; background-color: yellow; } @media (color) { div { color: red; } } </style> </head> <body> <div> <h2>CSS Media Query</h2> <p>This is an example of CSS media queries with the "color" media feature.</p> </div> </body> </html>
CSS color - <integer> Value
The following example demonstrates that the color <= 10 media feature, the h2 element will have blue text color by default −
When the number of bits per color component available on the device is less than or equal to 10, it changes the text color to red and the background color to yellow.
<html> <head> <style> h2 { color: blue; } @media (color <= 10) { h2 { color: red; background-color: yellow; } } </style> </head> <body> <h2>CSS Media Feature Color</h2> </body> </html>
CSS color - max-color Property
The following example demonstrates that the max-color: 8 media feature, the h2 element will have pink background and blue text color by default −
When the number of bits per color component available on the device is less than or equal to 8, it changes the text color to green and the background color to yellow.
<html> <head> <style> h2 { background-color: pink; color: black; } @media (max-color: 8) { h2 { background-color: yellow; color: green; } } </style> </head> <body> <h2>CSS Media Feature Color</h2> </body> </html>
CSS color- min-color Property
The following example demonstrates that the min-color: 4 media feature, the h2 element will have pink background and blue text color by default −
When the number of bits per color component available on the device is greater than or equal to 4, it change the background color to violet.
<html> <head> <style> h2 { background-color: pink; color: black; } @media (min-color: 4) { h2 { background-color: violet; } } </style> </head> <body> <h2>CSS Media Feature Color</h2> </body> </html>
To Continue Learning Please Login
Login with Google