Pay attention to the order of TRouBLe when writing shorthand properties in CSS (to avoid pitfalls)

Pay attention to the order of TRouBLe when writing shorthand properties in CSS (to avoid pitfalls)

Shorthand properties are used to assign values ​​to multiple properties at the same time. For example, font is a shorthand property that can be used to set multiple font properties. It specifies font-style, font-weight, font-size, font-height, and font-family.

font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;

There are also the following properties:

  • background is a shorthand property for multiple background properties: background-color, background-image, background-size, background-repeat, background-position, background-origin, background-chip, and background-attachment.
  • border is a shorthand property for border-width, border-style, and border-color, and these properties are also shorthand properties.
  • Border-width is a shorthand property for the width of the top, right, bottom, and left borders.

Shorthand properties can make code concise and clear, but they also hide some weird behaviors.

Shorthand properties will silently override other styles

Most shorthand properties allow you to omit some values ​​and only specify the values ​​you are interested in. Be aware, however, that doing so will still set omitted values, i.e. they will be implicitly set to their initial values. This will silently override styles defined elsewhere. For example, if you use the shorthand font attribute for a web page title and omit font-weight, the font weight will be set to normal.

Shorthand properties set the omitted value to their initial value

Add the following CSS:

h1{ 
  font-weight: bold; 
} 
.title{ 
  font: 32px Helvetica, Arial, sans-serif; 
}

At first glance you might think that the <h1 class="title">CSS property shorthand</h1> would make the title bold, but it doesn't. The above code is equivalent to the following code:

h1 { 
  font-weight: bold; 
} 
 
.title { 
  font-style: normal; (next 5 lines) The initial values ​​of these properties are font-variant: normal; 
  font-weight: normal; 
  font-stretch: normal; 
  line-height: normal; 
  font-size: 32px; 
  font-family: Helvetica, Arial, sans-serif; 
}

Adding these styles to the <h1> will make it appear in normal font instead of bold. These styles also override font styles inherited from ancestor elements. Of all the shorthand properties, font has the most serious problem because it sets too many property values. Therefore, avoid using fonts outside of the general styling of the <body> element. Of course, other shorthand properties may suffer from the same problem, so be careful.

Understanding the order of shorthand values

Shorthand properties try to accommodate the order of the property values ​​specified. You can set border: 1px solid black or border: black 1px solid, both will work. This is because the browser knows what type of value width, color, and border style correspond to.

But there are many attributes whose values ​​are ambiguous. In this case, the order of the values ​​is critical. It is important to understand the order of these shorthand properties.

1. Up, Right, Down, Left

When it comes to properties like margin, padding, and border properties that specify values ​​for all four sides of an element, it's easy for developers to get the order of these shorthand properties wrong. The values ​​of these properties are listed in clockwise order, starting from the top.

Remembering the order can help you avoid mistakes. The mnemonic for this is TRouBLe: top, right, bottom, left.

Use this formula to set the padding on all four sides of an element. For the link shown in the image below, the top padding is 10px, the right padding is 15px, the bottom padding is 0, and the left padding is 5px. Although these paddings may not appear uniform, they illustrate the order of the shorthand properties. 

.nav a { 
  color: white; 
  background-color: #13a4a4; 
  padding: 10px 15px 0 5px; /* top, right, bottom, left padding*/ 
  border-radius: 2px; 
  text-decoration: none; 
}

Attribute values ​​in this mode can also be abbreviated. If one of the four property values ​​is left unspecified at the end of the declaration, the unspecified side will take the value of the opposite side. When three values ​​are specified, the second value is used for both the left and right sides. When two values ​​are specified, the first value is used for top and bottom. If only one value is specified, it will be used for all four directions. Therefore the following declarations are all equivalent.

padding: 1em 2em; 
padding: 1em 2em 1em; 
padding: 1em 2em 1em 2em;

The following declarations are also equivalent.

padding: 1em; 
padding: 1em 1em; 
padding: 1em 1em 1em; 
padding: 1em 1em 1em 1em;

What's difficult for many developers is specifying three values. Remember, this case specifies the values ​​for top, right, and bottom. Since the value on the left is not specified, it will be equal to the value on the right. The second value will be applied to the left and right sides. Therefore, padding: 10px 15px 0 sets the left and right margins to 15px, the top margin to 10px, and the bottom margin to 0.

However, in most cases only two values ​​need to be specified. Especially for smaller elements, it’s best to have left and right padding larger than top and bottom padding. This style is very suitable for buttons or navigation links on web pages, as shown in the figure below. 

.nav a { 
  color: white; 
  background-color: #13a4a4; 
  padding: 5px 15px; /* top and bottom padding, then left and right padding*/ 
  border-radius: 2px; 
  text-decoration: none; 
}

It uses shorthand properties to add padding vertically first, then horizontally.

Since many properties follow this, it's best to keep it in mind.

2. Horizontal, vertical

The "TRouBLe" formula only applies to properties that set values ​​for the four directions of the box separately. There are also some properties that only support specifying a maximum of two values, including background-position, box-shadow, and text-shadow (although strictly speaking they are not shorthand properties). The order of these attribute values ​​is exactly the opposite of the order of the four-value attribute such as padding. For example, padding: 1em 2em specifies the vertical top/bottom property values ​​first, and then the horizontal right/left property values, while background-position: 25% 75% specifies the horizontal right/left property values ​​first, and then the vertical top/bottom property values.

Although it may seem counterintuitive to have the definitions in reverse order, the reason is simple: the two values ​​represent a Cartesian grid. Cartesian grid measurements are usually in x, y (horizontal, vertical) order. For example, as shown in Figure 1-15, to add a shadow to an element, you must first specify the x (horizontal) value. 

.nav .featured{ 
  background-color: orange; 
  box-shadow: 10px 2px #6f9090; /* The shadow is offset 10px to the right and 2px downward */ 
}
<div class="nav"> 
  <a href="#">Home</a> 
  <a href="#">Coffees</a> 
  Brewers 
  <a href="#" class="featured">Specials</a> 
</div>

The first (larger) value specifies the horizontal offset, and the second (smaller) value specifies the vertical offset.

If a property needs to specify values ​​in two directions from a point, think of a "Cartesian grid". If a property needs to specify the value of an element in four directions, think "clock".

Summarize

This is the end of this article about paying attention to the order of TRouBLe in shorthand properties in CSS (to avoid pitfalls). For more relevant content about paying attention to the order of TRouBLe in shorthand properties in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Jenkins Docker static agent node build process

>>:  JavaScript closure details

Recommend

Solution to Tomcat server failing to open tomcat7w.exe

I encountered a little problem when configuring t...

How to connect Django 2.2 to MySQL database

1. The error information reported when running th...

10 SQL statement optimization techniques to improve MYSQL query efficiency

The execution efficiency of MySQL database has a ...

Using HTML to implement a voting website cheating scheme that restricts IP

This is a cheating scheme for voting websites wit...

Detailed explanation of the use of React list bar and shopping cart components

This article example shares the specific code of ...

Detailed explanation of the use of Linux lseek function

Note: If there are any errors in the article, ple...

MySQL 8.0.15 download and installation detailed tutorial is a must for novices!

This article records the specific steps for downl...

Solve the problem of using swiper plug-in in vue

Since I used this plugin when writing a demo and ...

Learning to build React scaffolding

1. Complexity of front-end engineering If we are ...

Example of converting JavaScript flat array to tree structure

Table of contents 10,000 pieces of data were lost...

Basic learning and experience sharing of MySQL transactions

A transaction is a logical group of operations. E...

VMware virtual machine installation Apple Mac OS super detailed tutorial

Table of contents Summarize Sometimes we need to ...

A brief discussion on two methods of achieving semi-transparent background color in CSS

When laying out the page, in order to give users ...

Add a startup method to Linux (service/script)

Configuration file that needs to be loaded when t...

Summary of XHTML application in web design study

<br />Generally speaking, the file organizat...