Những gì sau và trước trong css?

Louis là nhà phát triển giao diện người dùng, nhà văn và tác giả có trụ sở tại Toronto, Canada. Anh ấy quản lý các bản tin Công cụ web hàng tuần và Năng suất công nghệ và viết blog về … Thông tin thêm về Louis ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• Các mẫu thiết kế giao diện Đào tạo UX

• Giao diện người dùng SmashingConf 2023

• Thử ngay bây giờ

• Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

• Bắt đầu miễn phí

• Danh sách kiểm tra thiết kế giao diện thông minh

Vì vậy, bạn đã thấy một số điều thú vị được thực hiện với các phần tử giả nhưng muốn biết kỹ thuật CSS này là gì trước khi tự mình thử?

Nếu bạn đã theo dõi các tab trên các blog thiết kế Web khác nhau, có lẽ bạn đã nhận thấy rằng các phần tử giả

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 đã nhận được khá nhiều sự chú ý trong bối cảnh phát triển giao diện người dùng — và vì lý do chính đáng. Đặc biệt, các thử nghiệm của một blogger - cụ thể là nhà phát triển Nicolas Gallagher có trụ sở tại London - đã đưa ra khá nhiều yếu tố giả trong thời gian gần đây.

Nicolas Gallagher đã sử dụng các phần tử giả để tạo 84 biểu tượng GUI được tạo từ HTML ngữ nghĩa

Để bổ sung cho sự tiếp xúc này (và tận dụng lợi thế của xu hướng đang phát triển), tôi đã tập hợp những gì tôi hy vọng là một danh sách khá toàn diện về các yếu tố giả. Bài viết này chủ yếu dành cho những bạn đã thấy một số điều thú vị được thực hiện với các phần tử giả nhưng muốn biết kỹ thuật CSS này là gì trước khi tự mình thử.

Mặc dù đặc tả CSS có chứa các phần tử giả khác, nhưng tôi sẽ tập trung vào

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5. Vì vậy, để cho ngắn gọn, tôi sẽ nói “các phần tử giả” để nói chung về hai phần tử cụ thể này.

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo ↬

Một phần tử giả làm gì?

Một phần tử giả thực hiện chính xác những gì từ này ngụ ý. Nó tạo một phần tử giả mạo và chèn nó vào trước hoặc sau nội dung của phần tử mà bạn đã nhắm mục tiêu

Từ “giả” là phiên âm của một từ Hy Lạp về cơ bản có nghĩa là “dối trá, lừa dối, giả dối. ” Vì vậy, gọi chúng là các phần tử giả là phù hợp, bởi vì chúng không thực sự thay đổi bất cứ điều gì trong tài liệu. Thay vào đó, chúng chèn các phần tử giống như bóng ma mà người dùng có thể nhìn thấy và có thể tạo kiểu trong CSS

Cú pháp cơ bản

Các phần tử giả

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 rất dễ viết mã (cũng như hầu hết các thuộc tính CSS không yêu cầu nhiều tiền tố của nhà cung cấp). Đây là một ví dụ đơn giản

#example:before {
   content: "#";
}

#example:after {
   content: ".";
}

Có hai điều cần lưu ý về ví dụ này. Đầu tiên, chúng tôi đang nhắm mục tiêu cùng một yếu tố bằng cách sử dụng

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

3 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4. Nói một cách chính xác, chúng là các phần tử giả trong mã

Thứ hai, nếu không có thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5, là một phần của mô-đun nội dung được tạo trong đặc tả, thì các phần tử giả sẽ vô dụng. Vì vậy, mặc dù bộ chọn phần tử giả là cần thiết để nhắm mục tiêu phần tử, nhưng bạn sẽ không thể chèn bất kỳ thứ gì nếu không thêm thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5

Trong ví dụ này, phần tử có id

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

7 sẽ có ký hiệu băm được đặt “trước” nội dung của nó và dấu chấm (hoặc dấu chấm) được đặt “sau” nội dung của nó

Một số lưu ý về cú pháp

Bạn có thể để trống thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 và chỉ coi phần tử giả như một hộp không có nội dung, như thế này

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

Tuy nhiên, bạn không thể xóa hoàn toàn thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5. Nếu bạn đã làm, phần tử giả sẽ không hoạt động. Ít nhất, thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 cần dấu ngoặc kép trống làm giá trị của nó

Bạn có thể nhận thấy rằng bạn cũng có thể viết mã các phần tử giả bằng cách sử dụng cú pháp dấu hai chấm (

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

01 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

02), mà tôi đã thảo luận trước đây. Giải thích ngắn gọn là không có sự khác biệt giữa hai cú pháp;

Một điểm cuối cùng liên quan đến cú pháp. Về mặt kỹ thuật, bạn có thể triển khai một phần tử giả phổ biến mà không cần nhắm mục tiêu vào bất kỳ phần tử nào, như thế này

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

0

Mặc dù những điều trên là hợp lệ, nhưng nó khá vô dụng. Mã sẽ chèn một ký hiệu băm trước nội dung trong mỗi phần tử trong DOM. Ngay cả khi bạn đã xóa thẻ

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

03 và tất cả nội dung của nó, bạn vẫn sẽ thấy hai ký hiệu băm trên trang. một trong phần tử

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

04 và một trong thẻ

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

03 mà trình duyệt tự động tạo

Đặc điểm của nội dung được chèn

Như đã đề cập, nội dung được chèn không hiển thị trong nguồn của trang. Nó chỉ hiển thị trong CSS

Ngoài ra, phần tử được chèn theo mặc định là một (hoặc, theo thuật ngữ HTML5, trong danh mục ngữ nghĩa cấp văn bản). Vì vậy, để cung cấp cho phần tử được chèn chiều cao, phần đệm, lề, v.v., bạn thường phải xác định rõ ràng phần tử đó là phần tử cấp khối

Điều này dẫn đến một mô tả ngắn gọn về cách tạo kiểu cho các phần tử giả. Nhìn vào đồ họa này từ trình soạn thảo văn bản của tôi

yếu tố tạo kiểu

Trong ví dụ này, tôi đã đánh dấu các kiểu sẽ được áp dụng cho các phần tử được chèn trước và sau nội dung của phần tử được nhắm mục tiêu. Phần tử giả có phần độc đáo theo cách này, bởi vì bạn chèn nội dung và kiểu trong cùng một khối khai báo

Cũng lưu ý rằng các quy tắc kế thừa CSS điển hình áp dụng cho các phần tử được chèn. Ví dụ: nếu bạn có một ngăn xếp phông chữ

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

06 được áp dụng cho phần tử

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

03 của tài liệu, thì phần tử giả sẽ kế thừa ngăn xếp phông chữ đó giống như bất kỳ phần tử nào khác.

Tương tự như vậy, các phần tử giả không kế thừa các kiểu không được kế thừa tự nhiên từ các phần tử cha (chẳng hạn như phần đệm và lề)

Sau Trước Gì?

Linh cảm của bạn khi nhìn thấy các phần tử giả

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 có thể là nội dung được chèn sẽ được đưa vào trước và sau phần tử được nhắm mục tiêu. Nhưng, như đã đề cập ở trên, đó không phải là trường hợp

Nội dung được đưa vào sẽ là nội dung con liên quan đến phần tử được nhắm mục tiêu, nhưng nó sẽ được đặt "trước" hoặc "sau" bất kỳ nội dung nào khác trong phần tử đó

Để chứng minh điều này, hãy xem đoạn mã sau. Đầu tiên, HTML

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

8

Và đây là CSS chèn một phần tử giả

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

9

Trong HTML, tất cả những gì bạn thấy là một đoạn văn có lớp

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

80, với dòng chữ “Nội dung khác” bên trong (giống như những gì bạn sẽ thấy nếu xem nguồn trên trang trực tiếp). Trong CSS, đoạn văn được cung cấp chiều rộng đã đặt, cùng với một số phần đệm và đường viền có thể nhìn thấy

Sau đó, chúng ta có phần tử giả. Trong trường hợp này, đó là một ký hiệu băm được chèn “trước” nội dung của đoạn văn. CSS tiếp theo cung cấp cho nó một đường viền, cùng với một số phần đệm và lề

Đây là kết quả xem trên trình duyệt

Vị trí của phần tử giả

Hộp bên ngoài là đoạn văn. Đường viền xung quanh biểu tượng hàm băm biểu thị ranh giới của phần tử giả. Vì vậy, thay vì được chèn “trước” đoạn văn, phần tử giả được đặt trước “Nội dung khác” trong đoạn văn

Chèn nội dung phi văn bản

Tôi đã đề cập ngắn gọn rằng bạn có thể để giá trị của thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 dưới dạng chuỗi rỗng hoặc chèn nội dung văn bản. Về cơ bản, bạn có hai tùy chọn bổ sung về những gì cần đưa vào làm giá trị của thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5

Đầu tiên, bạn có thể bao gồm một URL trỏ đến một hình ảnh, giống như bạn sẽ làm khi bao gồm một hình nền trong CSS

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

3

Lưu ý rằng các trích dẫn bị thiếu. Nếu bạn đặt tham chiếu URL trong dấu ngoặc kép, thì nó sẽ trở thành một chuỗi ký tự và chèn văn bản “url(hình ảnh. jpg)” làm nội dung, thay vì tự chèn hình ảnh

Đương nhiên, bạn có thể bao gồm một URI dữ liệu thay cho tham chiếu hình ảnh, giống như bạn có thể làm với nền CSS

Bạn cũng có tùy chọn để bao gồm một chức năng ở dạng

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

83. Hàm này, , “trả về dưới dạng một chuỗi giá trị của thuộc tính X cho chủ đề của bộ chọn. ”

Đây là một ví dụ

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5

Chức năng

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

84 làm gì?

Đoạn mã trên sẽ khiến giá trị

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

85 của mọi phần tử

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

86 trên trang được đặt ngay sau mỗi phần tử

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

86 tương ứng. Điều này có thể được sử dụng trong biểu định kiểu in để bao gồm các URL đầy đủ bên cạnh tất cả các liên kết khi tài liệu được in

Bạn cũng có thể sử dụng chức năng này để lấy giá trị của thuộc tính

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

88 của phần tử hoặc thậm chí các giá trị vi dữ liệu. Tất nhiên, không phải tất cả các ví dụ này đều có tính thực tiễn;

Mặc dù có thể lấy văn bản

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

88 hoặc

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

90 của một hình ảnh và hiển thị nó trên trang dưới dạng phần tử giả là thực tế, nhưng điều này là không thể. Hãy nhớ rằng phần tử giả phải là phần tử con của phần tử mà nó đang được áp dụng. Hình ảnh, là phần tử (hoặc trống), không có phần tử con, vì vậy nó sẽ không hoạt động trong trường hợp này. Điều tương tự cũng áp dụng cho các phần tử void khác, chẳng hạn như

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

91

Hỗ trợ trình duyệt đáng sợ

Như với bất kỳ công nghệ front-end nào đang phát triển, một trong những mối quan tâm đầu tiên là hỗ trợ trình duyệt. Trong trường hợp này, đó không phải là vấn đề lớn

Hỗ trợ trình duyệt cho các phần tử giả

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

4 và

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

5 xếp chồng lên nhau như thế này

• Chrome 2 trở lên,
• firefox 3. 5+ (3. 0 có hỗ trợ một phần),
• Safari 1. 3+,
• Opera 9. 2+,
• IE8+ (với một số lỗi nhỏ),
• Gần như tất cả các trình duyệt di động

Vấn đề thực sự duy nhất (không có gì ngạc nhiên) là IE6 và IE7 không hỗ trợ. Vì vậy, nếu đối tượng của bạn thuộc lĩnh vực phát triển Web (hoặc một thị trường khác có số lượng IE thấp), bạn có thể tiếp tục và sử dụng các phần tử giả một cách tự do

Các phần tử giả không quan trọng

May mắn thay, việc thiếu các phần tử giả sẽ không gây ra vấn đề lớn về khả năng sử dụng. Phần lớn, các phần tử giả thường là nội dung trang trí (hoặc giống như trình trợ giúp) sẽ không gây ra sự cố trong các trình duyệt không được hỗ trợ. Vì vậy, ngay cả khi khán giả của bạn có số lượng IE cao, bạn vẫn có thể sử dụng chúng ở một mức độ nào đó

Đôi Lời Nhắc Nhở

Như đã đề cập, nội dung phần tử giả không xuất hiện trong DOM. Những yếu tố này không phải là yếu tố thực. Như vậy, chúng không thể truy cập được vào hầu hết các thiết bị hỗ trợ. Vì vậy, đừng bao giờ sử dụng phần tử giả để tạo nội dung quan trọng đối với khả năng sử dụng hoặc khả năng truy cập trang của bạn

Một lưu ý khác là các công cụ dành cho nhà phát triển như Firebug không hiển thị nội dung được tạo bởi các phần tử giả. Vì vậy, nếu bị lạm dụng, các phần tử giả có thể gây đau đầu về khả năng bảo trì và khiến quá trình gỡ lỗi trở nên chậm hơn nhiều

Cập nhật. Như đã đề cập trong phần nhận xét, bạn có thể sử dụng các công cụ dành cho nhà phát triển của Chrome để xem các kiểu được liên kết với phần tử giả nhưng phần tử đó sẽ không xuất hiện trong DOM. Ngoài ra, trong phiên bản 1. 8

Điều đó bao gồm tất cả các khái niệm bạn cần để tạo ra thứ gì đó thiết thực với kỹ thuật này. Trong thời gian chờ đợi, để đọc thêm về các phần tử giả CSS, hãy nhớ xem một số bài viết mà chúng tôi đã liên kết đến trong phần này

làm gì &. Trước nghĩa là gì trong CSS?

Trước và sau trong mã hóa là gì?

Có trước hay không. Trước CSS?

Chúng ta có thể sử dụng two before trong CSS không?