CSS

Behold, the @supports rule. Moreover, known as Feature Queries in CSS. If you want to learn more about the supports CSS Feature Queries just go with the below links available in this tutorial.

• Feature Queries in CSS
• CSS Feature Query Examples
• New Image Effects Example using CSS Feature Queries

Feature Queries in CSS

It is a recent addition to the CSS and also not very much used. We can check if a particular property supports in a particular browser by using the @supports property.

CSS Feature Queries permit authors to state rules on the basis of whether particular property declarations are supported in CSS using the @supports at-rule.

Do Refer: 

• How to style lists using CSS
• Styling HTML Tables with CSS

CSS Feature Query Examples

If a browser supports a grid then apply a particular style.

@supports (display: grid) {
  /* apply this CSS */
}

We can use@supportsfor any CSS property, to check any value.

Also, we can utilize logical operators such as and, or and not to create complex feature queries in CSS.

The following example verifies whether the browser supports both CSS Grid and Flexbox:

@supports (display: grid) and (display: flex) {
  /* apply this CSS */
}

New Image Effects Example using CSS Feature Queries

we have numerous new image effects that can be arranged with CSS. Browser support varies of course, but a few of these new effects are quite cool. Who would have imagined overlays weren’t simply a Photoshop layer anymore? Let’s have a glance at mix-blend modes and how they can be used to images when supported.

CSS Feature Queries are a tool for bundling collectively CSS declarations so that they’ll run as a group. The resulting example may look complicated, but once it is broken down, it will make more sense.

Let’s see the simple HTML snippet that has a class implemented on the<article>tag.

<article class="feature-img">
<img src="example-img.jpg" />
</article>

The CSS:

@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {
 
.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}

Previously, we know that the condition should hold both a property and a value. In the above example, you’re checking for the mix-blend-mode property and the overlay value for that property. Clearly, this block is looking for browsers that allow for the mix-blend-mode of overlay and the ability to render a linear gradient. If this is supported, the image will have an overlay with a gradient applied to it, giving it a red color.

However, for browsers that don’t have mix-blend-mode support, just apply this syntax with not. There may be some styles applied, but very limited in comparison to those in the above query.

@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}

Result:

When CSS3 became popular, all sorts of new features started appearing. Unfortunately, not all of them were supported across all browsers. Vendor prefixes helped developers use those new features, and have them supported instantly without having to wait for each of them to become available for every browser. Let’s learn and understand what are vendor prefixes in CSS with examples from this tutorial.

• What are CSS Vendor Prefixes?
• List of CSS Prefixes
• How Should We Use Them?
• Adding a Prefix

What are CSS Vendor Prefixes?

CSS vendor prefixes are a string of characters concerning particular browser engines that we set before a CSS property name. They can have either of the resulting formats –

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

List of CSS Prefixes

Major browsers use the following prefixes:

• -webkit- Chrome, Safari, newer versions of Opera, almost all iOS browsers.
• -moz- Firefox.
• -o- Old versions of Opera.
• -ms- Microsoft Edge and Internet Explorer.

When using vendor prefixes, keep in mind that they are only temporary. A lot of properties that needed to have vendor prefixes attached to them are now fully supported and don’t need them.

Also Check:

• CSS Pseudo Elements
• CSS Pseudo Classes

How Should We Use Them?

Instead of using transition property, we can use:

.myElement {
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

Now, we use:

.myElement {
    transition: all 1s linear;
}

Since Opera and Edge are Chromium based, -o- and -ms- will probably go soon out of fashion. But as we said, vendor prefixes as a whole are going out of fashion, too.

Adding a Prefix

For instance, if you need to add a CSS3 transition to your document, you would use the transition property as given below:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

A border is a thin layer between padding and margin. Editing or creating the border you can make elements draw their area on the screen. Explore more about CSS Borders from this tutorial and make use of the border property in your codings.

• CSS border Property
• CSS Border Style
• The border width
• CSS border-color Property
• The border shorthand property
• The border radius

CSS border Property

The shorthand of the below properties can simply be border.

• border-style
• border-color
• border-width

Also, an image can be used as a border for the elements in the HTML using the border-image property and also with its specific properties like:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Okay, Let’s start with border-styleproperty:

CSS Border Style

Border style can be of multiple types like:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

The default style is none, so to make the border appear on the screen we need to change its style to something different like solid.

Also, we can give border to a specific edge, like:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Or we can simply define that in border-style property, like

p {
  border-style: solid dotted solid dotted;
}

Do Refer:

• CSS Comments
• The CSS Backgrounds Tutorial

The border width

We can set the width of the border using the border-width property by using predefined values like:

• thin
• medium (the default value)
• thick

Or in pixels, rem, em :

p {
  border-width: 3px;
}

Also, we can define the width of each of the side differently, like:

p {
  border-width: 2px 1px 2px 1px;
}

CSS border-color Property

We can set the color of the borders using the border-color property.

If we don’t set a color, the border by default is colored using the color of the text in the element.

Example:

p {
  border-color: red;
}

Also, we can set different colors for the different edges.

Example:

p {
  border-color: green red yellow blue;
}

The border shorthand property

The 3 properties mentioned above, border-width, border-style and border-color can be set using the shorthand property border.

For example:

p {
  border: 1px red dotted;
}

Or we can specify different edges:

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

The border radius

The border radius property is used to round off the corners of the actual borders. This CSS property holds the properties that are tabulated as follows:

Example:

p {
  border-radius: 15%;
}

Are you looking for the best ways to import another CSS file into CSS files? Then, you can simply use the CSS @import property. Want to know more about the property of CSS import? Just follow this tutorial till to the end and get information on Importing a CSS File using @import, etc.

• CSS @import Property
• Syntax
• Property Values
• Example Using @import rule
• Importing CSS rules conditionally
• How to include one CSS file in another?

CSS @import Property

The @import rule enables you to import a style sheet into another CSS style sheet. Also, it must be at the top of the document (but after any @charset declaration). Moreover, this helps media queries, so anyone can provide the import to be media-dependent. Look at the below sections and check out the syntax for importing.

Syntax

@import url;
@import url list-of-media-queries;
@import url supports( supports-query );
@import url supports( supports-query ) list-of-media-queries;

Property Values

where:

• URL/string: <string> or <url>() represents the location of the resource to import. We can place absolute or relative URLs in the url() reference.
• list-of-media-queries: This is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
• supports-query: Is either a <supports-condition> or a <declaration>.

Also Check: The CSS Backgrounds Tutorial

Formal syntax

@import [ <string> | <url> ] [ <media-query-list> ]?;
where 
<media-query-list> = <media-query>#

where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Example using @import CSS rules

@import 'custom.css';
@import url("chrome://communicator/skin/");

Importing CSS rules conditionally

@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

How to include one CSS file in another?

Do you think it is not possible to import one CSS file into another? Then you are wrong. Because it is possible to include one CSS file in another using CSS @import rules. Also, it can be done various times in the main HTML file or in the main CSS Style sheets. Look at the below example using the @import keyword:

Example:

<!-- Including one css file into other -->
@import "style2.css";
   
 h1 {
     color:green;   
 }
   
.css1 {
     color:black;
     background-image: linear-gradient(to right, #DFF1DF, #11A00C);
     position:static;   
 }

One thing to keep in mind that, the @import statements should be placed at the top/beginning of the CSS file to stop being ignored.
We can also use descriptors along with the @import statements.
Example:

@import url(mystyle.css) all;
@import url(mystyle-screen.css) screen;
@import url(mystyle-print.css) print;

CSS Box Sizing

The CSS box-sizingproperty allows us to include the padding and border in an element’s total width and height. Also, it helps make building CSS layouts easier and a lot more intuitive.

• box-sizing Property in CSS
• CSS Syntax
• Property Values
• Supported Browsers
• Example Code on CSS box-sizing Property
• With the CSS box-sizing Property
• Without the CSS box-sizing Property
• Helpful Tips about CSS Box-Sizing

box-sizing Property in CSS

The CSS box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

CSS Syntax:

box-sizing: content-box|border-box|initial|inherit;

Property Values

Supported Browsers

The browser supported by the CSS box-sizing property are enlisted below:

• Firefox 29.0 2.0 -Moz-
• Google Chrome 10.0 4.0 -WebKit-
• Opera 9.5
• Internet Explorer 8.0
• Apple Safari 5.1 3.2 -WebKit-

Example Code on CSS box-sizing Property

<!DOCTYPE html>
<html>
<head>
<style> 
div.container {
  width: 100%;
  border: 2px solid black;
}

div.box {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}
</style>
</head>
<body>

<div class="container">
  <div class="box">This div occupies the left half</div>
  <div class="box">This div occupies the right half</div>
  <div style="clear:both;"></div>
</div>

</body>
</html>

Output:

With the CSS box-sizing Property

If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

The box-sizing property is a great help. It has 2 values:

• border-box
• content-box

content-box is the default, the one we had for ages beforebox-sizingbecame a thing.

border-box is the new and great thing we are looking for. If you set that on an element.

Here is the same example as above, withbox-sizing: border-box;added to both <div> elements:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Output:

Without the CSS box-sizing Property

By default the width and height of an element is calculated as follows:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you fixed the width/height of an element, the element usually appears bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

The following example shows two<div>elements with the same specified width and height:

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

</body>
</html>

Here, the output will be

Helpful Tips about CSS Box-Sizing

1. The CSS box-sizingproperty ensures that padding and borders do not increase the width and height of elements.
2. Set box-sizing to CSS border-boxto ensure that the element size includes borders and padding.
3. padding-boxmanaged to apply the width and height of elements to their padding and content. But, Browsers no longer support this property.
4. Most modern browsers support the box-sizingproperty.
5. You can let users control the size of certain elements with the help of theresizeproperty.

The CSS background property permits you to control the background of any element (what paints underneath the content in that element). Background property in CSS is a shorthand property, which means that it provides you to communicate what would be various CSS properties in one.

• Constituent Properties of CSS Background
• Syntax
• Possible Values of CSS Backgrounds
• CSS background-color Property
• CSS background-image Property
• CSS background-position Property
• CSS background-origin Property
• CSS background-repeat Property
• CSS background-size Property’
• CSS background-attachment Property

Constituent Properties of CSS Background

The background of an element can be changed using several CSS properties:

• background-color
• background-image
• background-clip
• background-position
• background-origin
• background-repeat
• background-attachment
• background-size

Syntax

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

The backgroundproperty is defined as one or more background layers, divided by commas.

The syntax of each layer is as regards:

• Each layer may consist of zero or one occurrence of any of the following values:
  <attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
• The <bg-size>value may only be covered immediately after<position>, separated with the ‘/’ character, like this: “center/80%”.
• The <box>value may be included zero, one, or two times. If included once, it hovers bothbackground-originandbackground-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.
• The<background-color>value may only be involved in the last layer specified.

Possible Values of CSS Backgrounds

Background in CSS is a shorthand property and stand for the following. This value will vary depending on the actual property.

background-color − Sets a solid color for the element’s background, padding, and border background.

background-image − Defines the location of an image to be placed in the element’s background.

background-repeat − Sets a repeat direction for an image in the element’s background.

background-attachment − Sets an attachment state for any images in the element’s background.

background-position − Sets a position for the original image in the element’s background.

background-clip − Specifies the painting area of the background images

Do Check:

• The CSS z-index property
• The CSS float property and clearing

CSS background-color

body {
  background-color: cyan;
}

With CSS, a color is most often specified by:

• a valid color name – like “blue”
• a HEX value – like “#ffffff”
• an RGB value – like “rgb(0,0,255)”

You can set the background color for any HTML elements:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

CSS background-image Property

This is used to change the background image of a page, generally from paperwhite to any image (or gif) of your choice.

body {
 background-image: url("peep.jpeg");
 background-color: cyan;
}

CSS background-position Property

How to position a background-image, (with CSS Syntax)

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

background-position: value;

How to position a background-image using percent?

body {
  background-image: url('peep.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

CSS background-origin Property

Let the background-image start from the upper left corner of the content:

.e {
  border: 10px solod black;
  padding: 20px;
  background: url(img.jpeg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-repeat Property

Repeat a background-image only horizontally:

body {
  background-image: url("img.jpeg");
  background-repeat: repeat-x;
}

CSS background-size Property’

Specify the size of a background-image with “auto” and in pixels:

.e1{
  background: url(img1.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

.e2{
  background: url(img2.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

CSS background-attachment Property

A background-image that will not scroll with the page (fixed):

body {
  background-image: url("img.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}