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
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.Để 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;
}
5Trong 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;
}
0Mặ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
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ợpNộ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;
}
8Và đây là CSS chèn một phần tử giả
#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}
9Trong 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ấySau đó, 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
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;
}
3Lư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;
}
5Chứ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 inBạ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;
}
91Hỗ 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