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

Introduction to html form control disabled attributes readonly VS disabled

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

Introduction to html form control disabled attributes readonly VS disabled

The big role of HTML meta

HTML is actually the application of learning several important tags

Conditional comment style writing method and sample code

Detailed explanation of several examples of insert and batch statements in MySQL

Design theory: On the issues of scheme, resources and communication

MySQL 5.7 Common Data Types

Let's learn about MySQL database

Common errors and solutions for connecting Navicat to virtual machine MySQL

MySQL5.7.03 Replacement of higher version to MySQL 5.7.17 Installation process and solutions to problems found

Recommend

Specific use of the wx.getUserProfile interface in the applet

Summary of MySQL common SQL statements including complex SQL queries

mysql 5.7.17 winx64.zip installation and configuration method graphic tutorial

How to create a trigger in MySQL

MySQL 5.7.20\5.7.21 free installation version installation and configuration tutorial

Explanation of factors affecting database performance in MySQL

React and Redux array processing explanation

Telnet is moved to busybox-extras in Alpine image

Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)

What are the differences between CDN, SCDN, and DCDN for website acceleration? How to choose?

How to automatically back up the mysql database regularly

JavaScript static scope and dynamic scope explained with examples

Pay attention to the use of HTML tags in web page creation

Teach you the detailed process of using Docker to build the Chinese version of gitlab community

Encapsulate a simplest ErrorBoundary component to handle react exceptions