Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết

20/03/2019

1. Thuộc tính  content  không chỉ có mỗi value là  "" 

Thuộc tính content là thuộc tính quan trọng nhất khi bạn sử dụng những pseudo-elements như  :before  hay  :after , nếu thiếu đi thuộc tính này thì những thuộc tính khác coi như không có tác dụng gì.

Tuy nhiên, bên cạnh cái value được sử dụng nhiều nhất là  content: ""  thì  content  còn có thể chứa nhiều kiểu value khác, mà có thể bạn cũng chưa khám phá hết. Hãy cùng liệt kê để xem  content  còn có bao nhiêu kiểu value nữa nhé!

Lấy nội dung từ  data-*  attribute của thẻ HTML

<div class="pending" data-status="Pending">Status</div>

div {

content: attr(data-status);

}

Thay vì tạo ra 1 thẻ HTML mới, ta gắn thêm  data-status="Pending" , ở CSS sẽ lấy được giá trị 1 cách dynamic từ HTML trả về, và HTML sẽ chính là nơi để code Backend (code logic) can thiệp truyền vào dễ dàng.

Ở ví dụ trên có bạn sẽ thắc mắc rằng, vì sao không đưa trực tiếp đoạn text Pending vào  content  cho nhanh, sẽ không linh động nếu trang web của chúng ta có đa ngôn ngữ các bạn ạ! Thay vào đó, nếu sử dụng kiểu  content: attr(data-*)  như này sẽ giúp lấy tự động giá trị từ HTML

 content  là 1 image

div:before {

content: url(image.jpg);

}

Hay thậm chí là  content  còn có thể chứa nhiều image:

div:before {

content: url(image.jpg) url(image.jpg);

}

 

Tuy nhiên nếu đưa vào image kiểu này thì không control được size của ảnh, không như thuộc tính  background-image  ta có  background-position  để canh vị trí hay là  background-size  để resize kích thước ảnh. Có lẽ vì vậy mà nó ít được sử dụng.

Chứa text nhiều dòng

div:before {

content: 'text line 1\a'

'text line 2';

white-space: pre;

}

2. Làm hiệu ứng Smooth scrolling chỉ cần CSS  scroll-behavior 

Smooth scrolling là hiệu ứng khi click vào link trên menu và trang cuộn từ từ tới thành phần tương ứng.

Trước đây mình hay dùng JQuery, nhưng dạo gần đây, mình khám phá ra 1 thuộc tính CSS mới đã và đang được phát triển để phổ biến hơn đến các trình duyệt đó là  scroll-behavior .

Một điều lưu ý là để sử dụng thuộc tính này làm được hiệu ứng trên thì bạn phải tạo ra vùng scroll bởi 1 div bọc tất cả nội dung trang web, thay vì là sử dụng scroll mặc định của  html, body .

Giả sử mình có 1 div  <div class="wrapper"></div>  bọc toàn bộ nội dung trang web và thêm vào đoạn code CSS như sau:

.wrapper {

width: 100vw;

height: 100vh;

overflow: auto;

scroll-behavior: smooth;

}

Lúc này chỉ cần link  href="#target_id_section"  đến id của section tương ứng, ta có được hiệu ứng Smooth scrolling bằng CSS thuần, mà không cần đến 1 chút JS nào.

Code HTML:

<div class="wrapper">

<nav>

<a href="#section-1">Section 1</a>

<a href="#section-2">Section 2</a>

<a href="#section-3">Section 3</a>

</nav>

<section id="section-1">Section 1</section>

<section id="section-2">Section 2</section>

<section id="section-3">Section 3</section>

</div>

Code CSS:

.wrapper {

width: 100vw;

height: 100vh;

overflow: auto;

scroll-behavior: smooth;

}

nav {

position: fixed;

background-color: gray;

width: 100%;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

a {

color: #fff;

text-decoration: none;

padding: 0 20px;

}

}

section {

height: 100vh;

align-items: center;

justify-content: center;

color: #fff;

font-size: 30px;

}

#section-1 {

background-color: red;

}

#section-2 {

background-color: green;

}

#section-3 {

background-color: blue;

}

Nhưng để áp dụng được cho dự án của bạn, hãy chú ý đến vài nhược điểm sau:

1. Chưa support hết các browsers phổ biến, hãy xem những trình duyệt và các phiên bản được support ở CanIUse

2. Chưa customize được nhiều options như kiểu trượt hiệu ứng hay là set thời gian hiệu ứng trượt theo mong muốn

Và đương nhiên là những nhược điểm trên hoàn toàn có thể khắc phục được bởi sự can thiệp của JS, bạn tìm hiểu thêm ở bài viết này

Select thành phần parent khi focus vào thành phần children với pseudo  :focus-within 

Đây là 1 pseuso-class mới giúp chúng ra style cho thẻ parent khi focus vào children của nó. Children ở đây có thể là nhiều cấp.

Các bạn lưu ý là với  :focus-within  thì chỉ có thể sử dụng được khi thành phần children có trạng thái  :focus  thôi, hầu hết là các thành phần trong form như  input ,  select ,  button . Còn lại các thẻ như  div ,  img ,  p  thì không có trạng thái  :focus  đâu nhé!

Bây giờ, giả sử mình muốn highlight 1 cái box khi focus vào ô input trong box đó thì với  :focus-within  mình đã xử lý được 1 cách dễ dàng

Code HTML:

<form>

<h3>Search form</h3>

<div class="form-group">

<input type="text" place-holder="Type your keyword"/>

<button type="submit">Search</button>

</div>

</form>

Code CSS:

body {

width: 100vw;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: #ddd;

}

form {

padding: 20px;

width: 500px;

border-radius: 5px;

background-color: #fff;

box-shadow: 0px 2px 10px 0px rgba(57, 70, 86, 0.1);

transition: all .3s ease;

&:focus-within {

box-shadow: 0px 0px 50px 0px rgba(57,70,86,0.5);

}

}

h3 {

margin: 0;

text-transform: uppercase;

}

.form-group {

display: flex;

align-items: center;

margin-top: 20px;

}

input {

height: 50px;

padding: 0 20px;

border-radius: 5px;

border: 1px solid #ddd;

flex: 1;

}

button {

margin-left: 20px;

height: 50px;

padding: 0 30px;

border: none;

background-color: olive;

color: #fff;

border-radius: 5px;

}

Cho đến thời điểm hiện tại của bài viết này thì trình duyệt IE và Edge vẫn chưa support nó, các trình duyệt phổ biến còn lại cho Desktop và Mobile hầu như là support ổn rồi.

Nguồn: viblo.asia

Bài viết liên quan

1
Bạn cần hỗ trợ?