Hello xin chào mọi người, mình đã trở lại và tiếp tục với phần 3 của series về Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết
Bắt đầu thôi nào!
Một vài thủ thuật CSS mà chính Front end có thể còn chưa biết (P1)
Một vài thủ thuật CSS mà chính Front end có thể còn chưa biết (P2)
<img />
thiếu thuộc tính alt
Thuộc tính alt
luôn được coi là bắt buộc phải có đối với thẻ img
, nhưng nhiều lúc dev lại quên đặt nó vào, vì xu hướng là trong nhiều trường hợp diễn ra một cách bình thường, thì thiếu thuộc tính alt
vẫn không làm ảnh hưởng gì đến việc hiển thị 1 bức ảnh cả.
Những mục đích của thuộc tính
alt
mà có lẽ bạn chưa biết rõ như:
- Giúp hiển thị thông tin về bức ảnh nếu chẳng may đường dẫn ảnh bị lỗi hoặc kết nối mạng chậm, làm cho ảnh không hiển thị ra được <= Đây có lẽ là lợi ích mà nhiều dev biết về nó nhất.
- Giúp cho những người dùng sử dụng screen reader đọc được nội dung của ảnh (bạn hiểu nôm na đây như là dạng công nghệ hỗ trợ cho người mù khi sử dụng máy tính ấy) <= Đây là một trong những tính năng liên quan đến Web Accessibility (Accessibility hay còn được viết tắt là A11y), các bạn có thể tìm hiểu thêm với keyword trên.
- Ngoài ra,
alt
còn giúp cho các công cụ search engine crawlers hay còn gọi là bots của Google dễ dàng index được hình ảnh trên trang web của bạn <= Đối với các bạn làm bên SEO thì đây được biết đến như một hình thức SEO onpage.
Chính vì vậy mà hôm nay mình xin giới thiệu đến các bạn một cách thức dùng CSS để nhắc nhở cho dev luôn phải:
alt
vào thẻ img
=> sử dụng selector img:not([alt])
img[alt='']
img:not([alt]),
img[alt=''] {
border: 5px solid red;
}
Hoặc nếu bạn đang dùng SASS
img {
&:not([alt]),
&[alt='']{
border: 5px solid red;
}
}
Browser Support: QUÁ TUYỆT VỜI
Nếu bạn không phải làm việc cho IE8, thì yên tâm là tất cả trình duyệt đã hỗ trợ thuộc tính
:not()
kia rồi.
vertical-align: super
một cách làm khác thay cho thẻ <sup>
Giả sử rằng cấu trúc HTML trang web của bạn đang sử dụng thẻ <span>
, đột nhiên thiết kế có thay đổi thêm ký hiệu đồng tiền $ trước giá (price) của 1 sản phẩm, thì lúc này bạn có xu hướng nghĩ về thẻ <super>
trong HTML và tiến hành tìm tất cả các component có thay đổi để sửa lại cấu trúc HTML.
Nhưng việc này là không cần thiết lắm, vì mình sẽ cho bạn 1 cách làm khác giúp update nhanh hơn. Đó là sử dụng thuộc tính vertical-align: super
trong CSS (có lẽ như vertical-align: middle
mới là thuộc tính mà nhiều dev biết đến hơn nhỉ?).
Thay vì đó, sử dụng vertical-align: super
ta cũng làm được điều tương tự.
Browser Support: ĐÂY LÀ THUỘC TÍNH CỦA CSS2 MÀ!!!
Chỉ là do ít có trường hợp áp dụng trong khi làm layout với CSS, nên nó bị lãng quên. Chứ thuộc tính này đã có từ lâu, từ thời CSS2 rồi.
transform
rồi detransform
là hết transform
Đặt cái tiêu đề tip cho vui vui chút thôi, chứ ở đây mình đang muốn đề cập đến một cách sử dụng thuộc tính transform
để skewed button.
Khi bạn set transform: skewX(-30deg)
cho parent (thành phần cha), thì ở trong children (thành phần con) nó cũng bị skewed theo. Điểm thú vị là ở đây, ở children bạn chỉ cần set giá trị phủ định lại giá trị trên là được, tức trở thành transform: skewX(30deg)
Lưu ý: thành phần con bắt buộc KHÔNG PHẢI là
inline
nha, vìinline
như thẻ<span>
,<a>
thì nó sẽ không ăn được, bạn phải đưa nó vềinline-block
hoặcblock
nhé!
>>> Xem thêm: Lộ trình học lập trình từ cơ bản đến nâng cao cho sinh viên và người đi làm
Browser Support: 100% SUPPORT
Các thuộc tính của
transforms2d
hiện nay hầu như các trình duyệt phổ biến đã đọc được hết rồi.
Nguồn: Viblo.asia