Đọc tiều đề chắc hẳn mọi người cũng đã đoán được hôm nay chúng ta sẽ nói về chủ đề là ::after và ::before trong CSS.
::after và ::before đã rất là quen thuộc với chúng ta trong quá trình học tập và làm việc, đặc biệt là các Front End Developer. Hôm nay mình xin chia sẻ sâu hơn một chút những gì mình đã tìm hiểu được về hai pseudo-element này, rất mong được mọi người ủng hộ .
::after và ::before là gì?
::after và ::before được gọi là các pseudo-elements hay còn được hiểu là các phần tử giả và chúng được sử dụng trong CSS để tạo ra các phần tử giả trong element.
::before sẽ tạo ra một phần tử giả luôn luôn là element con đầu tiên của element được sử dụng ::before.
Tương tự đối với ::after nhưng phần tử giả lúc này luôn luôn là element con cuối cùng.
Cú pháp
::after :afterViệc trong CSS3 chúng ta sử dụng :: thay vì : như trong CSS2 với mục đích để phân biệt pseudo-element với pseudo-class.
Một số lưu ý khi sử dụng
Thứ nhất
Tất cả các trình duyệt đều hỗ trợ cú pháp : của CSS nhưng đối với cú pháp :: trong CSS3, chúng ta cần chú ý IE8 và Opera 4-6 chỉ hỗ trợ :. Vậy nên chúng ta nên sử dụng : thay vì :: vừa ngắn gọn lại đảm bảo không gặp những lỗi không mong muốn. Mình xin phép sử dụng : từ giờ đến cuối bài viết.
Thứ hai
Bất kỳ khi nào sử dụng :after hoặc :before chúng ta đều cần khai báo content: ''; cho phần tử giả đó, nếu không có content thì phần tử giả sẽ không được render ra trên DOM cũng như hiển thị lên trên website. Và content có thể chứa các giá trị:
- Một chuỗi: content: 'a string';. Đối với các ký tự đặc biệt thì cần mã code đặt biệt, ví dụ như unicode.
- Một ảnh: content: url['/path/image.jpg'];. Ảnh được chèn vào sẽ có size giữ nguyên theo ảnh gốc và không thể resize được.
- Rỗng: content: ''; rất hữu ích khi clearfix và chèn ảnh dưới dạng background-image
- Khi muốn xóa phần tử giả khỏi trang, chúng ta có thể sử dụng: content: none;
Thứ ba
Phần tử giả được tạo ra sẽ có display: inline.
Thứ tư
Đã bao giờ bạn cố gắng thêm :after hoặc :before cho thẻ img chưa? Mặc dù bạn đã khai báo content đầy đủ và style mọi thứ cho nó nhưng vẫn không thấy :after [:before] của bạn đâu dẫu cho bạn kiểm tra trong dev tool vẫn thấy.
Nguyên nhân là do img không áp dụng được :after và :before hay nó rộng ra là các replaced element sẽ không áp dụng được :after và :before.
Vậy replaced element là gì? Chúng những element mà nội dung của chúng nằm ngoài phạm vi của CSS formatting model. Hay hiểu đơn giản hơn đó là những element mà CSS không thể style được. Gồm các thẻ như: audio, video, canvas, svg, ... Bạn có thể tham khảo thêm tại đây
Vậy tại sao nội dung của các replaced element lại nằm ngoài phạm vi của CSS formatting model. Bởi vì nội dung của chúng được lấy từ bên ngoài tài liệu .html của bạn.
VD: hình ảnh bạn đưa vào trang web bằng thẻ img sẽ được lấy link tuyệt đối hoặc tương đối vào nên nội dung của nó không thuộc document của bạn.
Nhưng ngoài các replaced element còn các element khác cũng không sử dụng được :after hay :before. Đó là một vài type của thẻ input, cụ thể là các type mình đã test dưới đây:
Trong một vài lần code, mình vô tình áp dụng :after và :before cho input type text và thật ngạc nhiên nó không hiện lên trên website của mình.
Mình có tìm hiểu vì sao mà các input này không nhận :after và :before và tìm thấy câu trả lời khá thuyết phục trên stack overflow.
Cụ thể, câu trả lời là :after và :before chỉ được áp dụng cho các container element hay các phần tử giả sẽ được render vào bên trong element đó. Và hiển nhiên input không thể chứa các element khác nên nó sẽ không sử dụng được.
Tuy nhiên điều này lại không đúng đối với các input type còn lại [VD: date, week,...] cho nên vẫn chưa thể khẳng định được câu trả lời ở trên có đúng hay không? Nếu mọi người có ý kiến khác đừng ngại ngần comment bên dưới để chúng ta cùng thảo luận.
Ứng dụng tuyệt vời của :after và :before
:after và :before có rất nhiều ứng dụng tuyệt vời khi sử dụng trong trang web.
1. Clearfix
Chúng ta có thể sử dụng :after để tạo ra một phần tử giả làm nhiệm vụ clear float thay cho việc tạo ra một div.
2. Custom checkbox, radio-button
3. Các hiệu ứng hover đẹp mắt
Ngoài ra còn nhiều ứng dụng khác của :after và :before mà mình chưa kể ra ở đâu nhưng chúng thực sự đem lại hiệu quả.
Lời kết
Trên đây mình đã đưa ra những hiểu biết của mình về hai pseudo-element :after và :before.
Nếu có ý kiến góp ý nào, mọi người hãy để lại comment bên dưới nhé. Cảm ơn mọi người đã đọc bài viết.
References
//css-tricks.com/almanac/selectors/a/after-and-before/
//developer.mozilla.org/en-US/docs/Web/CSS/::before
//developer.mozilla.org/en-US/docs/Web/CSS/::after
//stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field
CSS reset là một file thường được thấy trong các thư mục của rất nhiều project web frontend. và ai đã và đang thiết kế giao diện website với HTML và CSS đều hiểu sự quan trọng của reset css bạn có biết nó được dùng vào mục đích gì không? Tại sao chúng ta phải cần sử dụng reset css trong thiết kế web, và cách tạo ra chúng và sử dụng dụng file reset.css như thế nào? Đó là những vấn đề mà trong bài viết hôm nay mình muốn chia sẻ với các bạn.
CSS Reset là gì?
CSS Reset là một loại các rules của CSS giúp thiết lập các style của tất cả đối tượng HTML [element] theo một chuẩn nhất định. Nói đơn giản thì nó là môn võ và bạn sẽ cần tới trong tất cả các dự án có liên quan tới frontend web và application.
Bạn là một lập trình viên và phải xử lý việc giao diện hiển thị giống hệt nhau [hoặc khác nhau rất ít] trên các trình duyệt web, thì rõ ràng việc viết 1 đoạn code mà hoạt động trên tất cả trình duyệt tốt hơn là dùng các file style khác nhau cho mỗi trình duyệt chuẩn chưa?
Sử dụng CSS Reset, bạn luôn nắm thế chủ động - bạn như ông chủ, yêu cầu những trình duyệt sử dụng chung các thuộc tính CSS do bạn quy định, sau đó bạn có thể chỉnh sửa theo ý thích của mình. Quá trình làm việc cross-browser lúc này dễ dàng hơn hẳn.
Tạo reset css như nào ?
Là ta định đạng các đối thương trong HTML về một kiểu nào đó chung thường thì dưa các thẻ có định dạng margin, padding bằng 0, viền các đối tượng là none, dạng danh sách ul, ol … list-style là none, có thể qui định thêm kiểu chữ hoặc cỡ chữ tùy vào ý đồ của bạn, tuy nhiên cỡ chữ thường người cho cho 100% rồi sau đó chúng ta định dạng lại trong phần thiết kế giao diện sau đó. Ví dụ:
*{ margin: 0; padding: 0; border: 0; font-size: 100%; }Ta cũng có thể liệt kê các thẻ html rồi định dạng lại:
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; border: 0; font-size: 100%; } ol, ul { list-style: none; }Tuy nhiên để tiện lợi cũng như tạo cho phần reset css được chặc chẽ và chính xác hơn mình giới thiệu những bộ reset css được nhiều người sử dụng nhất đó là do những người lập trình css trên thế giới tạo ra và chia sẻ, hiển nhiên là được update thường xuyên.
- Normalize.css
Đây là 1 file CSS tiêu chuẩn được sử dụng rất nhiều trong các thư viện Frontend Framework như Bootstrap
Bạn có thể xem file này tại đây
- CSS Reset của Eric Myer
Cái này cũng khá phổ biến và được dùng nhiều.
Bạn xem code nó ở đây
- MarkSheet CSS Reset
Các đoạn code reset rất hữu ích nếu bạn sử dụng 100% web HTML5.
Bạn xem code nó vô đây
- MiniReset.css
Một CSS Reset cũng khá hiệu quả và ok.
Bạn xem code nó click đây
Sử dụng CSS Reset:
- CSS Reset luôn đặt đầu tiên trong các file CSS
- CSS Reset luôn xử lý các element HTML
Điều này được hiểu là CSS Reset sẽ tác động tới các element như: , chứ không phải hay . Tức là, nhiệm vụ của CSS Reset là làm việc với các element trực tiêp chứ không phải các class hay ID nào cả. Lý do thì là bởi nó làm việc với trình duyệt, mà các trình duyệt cũng làm cách tương tự để áp đặt các style mặc định vào.
- Custom CSS Style phải gọi vào các class/ID hoặc có parent element
Bạn nên code vào:
.button thay vì a.button. .list li thay vì ul li hay ul.list liViệc tránh gọi các element trình duyệt mà sử dụng class/ID đóng vai trò quan trọng giúp bạn dễ dàng xử lý xung đột giữa CSS Reset và custom style.
Tuy là một phần nhỏ trong thiết kế diện web nhưng rất quan trọng, các bạn không thể có được một giao diện như ý khi bỏ qua bước này. Chúc các bạn thành công!