Kiến thức về CSS là một kỹ năng cơ bản trong không gian phát triển web. Tuy nhiên, việc triển khai một số mẫu thiết kế web nhất định chỉ bằng CSS có thể là một nhiệm vụ khó chịu và thường đòi hỏi sự hiểu biết sâu sắc về nó. Trong bài viết này, Rico Mossesgeld, Nhà phát triển web tự do hàng đầu, chia sẻ một số mẹo và thủ thuật CSS giúp tận dụng các tính năng CSS ít được biết đến để giải quyết các vấn đề về bố cục và thiết kế thực sự
Qua
Rico Mossesgeld
Rico đã xây dựng các ấn phẩm và dịch vụ trực tuyến cho các cơ quan lớn, công ty truyền thông, cơ sở, quỹ và nhật báo lớn.
CHIA SẺ
CHIA SẺ
Lĩnh vực phát triển web front-end đã đạt được những tiến bộ đáng kể trong vài năm qua. Tuy nhiên, giao diện người dùng web, như người dùng thấy, vẫn giống nhau. Đánh dấu HTML được tạo kiểu bằng CSS
Nhiều vấn đề về bố cục ban đầu có vẻ đơn giản nhưng thường tỏ ra phức tạp. Nếu không có kiến thức sâu rộng về cách thức hoạt động của một số tính năng CSS nhất định, những bố cục nâng cao này dường như không thể đạt được chỉ với CSS
Trong bài viết này, bạn sẽ tìm thấy tám mẹo và thủ thuật CSS chuyên nghiệp tận dụng các tính năng CSS ít được biết đến hơn để triển khai một số bố cục và hiệu ứng nâng cao này
1. Tối đa hóa bộ chọn anh chị em CSS
Vấn đề. Bạn đang đánh mất cơ hội tối ưu hóa bằng cách không sử dụng bộ chọn anh chị em
Giải pháp. Sử dụng bộ chọn anh chị em bất cứ khi nào nó có ý nghĩa. Bất cứ khi nào bạn đang làm việc với một danh sách các mục và bạn cần xử lý mục đầu tiên hoặc mục cuối theo cách khác, bản năng đầu tiên của bạn có thể là sử dụng bộ chọn CSS giả
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
1 và document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2Ví dụ: khi tạo biểu tượng menu hamburger chỉ CSS
Xem Pen Maximizing CSS Sibling Selectors 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Điều này thật ý nghĩa. Mỗi thanh có một đáy lề, ngoại trừ thanh cuối cùng
Tuy nhiên, hiệu ứng tương tự cũng có thể xảy ra thông qua bộ chọn anh chị em liền kề [+]
Xem Pen Maximizing CSS Sibling Selectors 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Điều này cũng có ý nghĩa. Mọi thứ sau thanh đầu tiên đều có lề trên. Thủ thuật CSS này không chỉ tiết kiệm thêm một vài byte [có thể dễ dàng bổ sung cho bất kỳ dự án cỡ trung bình nào] mà còn mở ra một thế giới khả năng
Xem xét danh sách các thẻ này
Xem Pen Maximizing CSS Sibling Selectors 3 của Rico Mossesgeld [@ricotheque] trên CodePen
Mỗi cái có một tiêu đề và văn bản, cái sau được ẩn theo mặc định. Nếu bạn chỉ muốn hiển thị văn bản của thẻ đang hoạt động [với lớp
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
3] và những nội dung theo sau nó hiển thị, bạn có thể thực hiện nhanh chóng chỉ bằng CSSXem Pen Maximizing CSS Sibling Selectors 4 của Rico Mossesgeld [@ricotheque] trên CodePen
Với một chút JavaScript, điều này cũng có thể tương tác
Tuy nhiên, chỉ dựa vào JavaScript cho tất cả những điều đó sẽ dẫn đến một tập lệnh như thế này
Xem Pen Maximizing CSS Sibling Selectors 5 của Rico Mossesgeld [@ricotheque] trên CodePen
nơi bao gồm jQuery như một phần phụ thuộc cho phép bạn có một đoạn mã ngắn
2. Định cỡ phần tử HTML nhất quán
Vấn đề. Các phần tử HTML có kích thước không nhất quán trên các trình duyệt khác nhau
Giải pháp. Đặt
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
4 cho tất cả các phần tử thành document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
5. Một điều cấm kỵ trong thời gian dài đối với các nhà phát triển web, Internet Explorer đã làm đúng một điều. Nó có kích thước hộp đúngCác trình duyệt khác chỉ xem nội dung khi tính chiều rộng của phần tử HTML, mọi thứ khác được coi là phần dư thừa. Div
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
6, với phần đệm document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
7 và đường viền document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
8, hiển thị rộng 242 pixelInternet Explorer coi phần đệm và đường viền là một phần của chiều rộng. Ở đây, div từ phía trên sẽ rộng 200 pixel
Xem Bản trình diễn mô hình hộp CSS Pen 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Khi bạn hiểu rõ về nó, bạn sẽ thấy cách tiếp cận thứ hai hợp lý hơn, ngay cả khi nó không tuân theo
Nếu tôi nói chiều rộng là 200px, chết tiệt, nó sẽ là một hộp rộng 200px ngay cả khi tôi có 20px phần đệm
Trong mọi trường hợp, CSS sau giữ cho kích thước phần tử [và do đó là bố cục] nhất quán trên tất cả các trình duyệt
Xem Pen CSS Box Model Demo 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Bộ bộ chọn CSS thứ hai bảo vệ các thành phần HTML được tạo kiểu mà không cần lưu ý đến hộp viền khỏi sự gián đoạn bố cục
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
0 hữu ích đến mức nó là một phần của khung CSS tương đối phổ biến có tên là sanitize. css3. Các yếu tố chiều cao năng động
Vấn đề. Giữ chiều cao của phần tử HTML tỷ lệ thuận với chiều rộng của nó
Giải pháp. Sử dụng đệm dọc để thay thế cho chiều cao
Giả sử bạn muốn chiều cao của phần tử HTML luôn khớp với chiều rộng CSS của nó.
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
1 không thay đổi hành vi mặc định của các phần tử khớp với chiều cao nội dung của nóXem Pen Dynamic Height Elements 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Câu trả lời là đặt chiều cao thành 0 và sử dụng padding-top hoặc padding-bottom để đặt chiều cao thực tế của
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 thay thế. Một trong hai thuộc tính có thể là tỷ lệ phần trăm chiều rộng của phần tửXem Pen Dynamic Height Elements 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Bây giờ
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 sẽ vẫn là hình vuông cho dù nó có rộng bao nhiêu. document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
4 giữ cho nội dung dài không phá vỡ tỷ lệ nàyKỹ thuật này, với một số sửa đổi, rất phù hợp để tạo video nhúng giữ nguyên tỷ lệ khung hình của chúng ở bất kỳ kích thước nào. Chỉ cần căn chỉnh phần nhúng với đầu của
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 và từ trái qua document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
6, đặt cả hai kích thước của phần nhúng thành 100% để nó “lấp đầy” document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 và thay đổi document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
9 của document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 để phù hợp với tỷ lệ khung hình của videoXem Pen Dynamic Height Elements 3 của Rico Mossesgeld [@ricotheque] trên CodePen
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
10 cho document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 đảm bảo rằng document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
12. document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
9 mới chỉ là chiều cao của tỷ lệ khung hình chia cho chiều rộng của nó, nhân 100. Ví dụ: nếu tỷ lệ khung hình của video được nhúng là 16. 9, phần trăm phần đệm dưới đáy phải là 9 chia cho 16 [. 5625] và nhân với 100 [56. 25]4. Phần tử chiều rộng động
Vấn đề. Giữ chiều rộng của phần tử HTML tỷ lệ thuận với chiều cao của nó
Giải pháp. Sử dụng cỡ chữ làm cơ sở cho kích thước của phần tử
Bây giờ, điều ngược lại, hoặc các thùng chứa thay đổi chiều rộng bằng chiều cao của chúng thì sao? . Hãy nhớ rằng chiều rộng và chiều cao có thể tính bằng
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
15, nghĩa là chúng có thể là tỷ lệ của phần tử document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
14Phần tử có
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
14 là 40px, chiều rộng là document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
18 và chiều cao là document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
19 sẽ rộng 80 pixel [40 x 2] và cao 40 pixel [40 x 1]Xem Các yếu tố chiều rộng động của bút của Rico Mossesgeld [@ricotheque] trên CodePen
Bạn muốn thay đổi chiều cao của
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2? Lưu ý duy nhất là không thể tự động làm cho kích thước phông chữ của phần tử khớp với chiều cao của phần tử gốc chỉ thông qua CSS. Tuy nhiên, kỹ thuật này cho phép cắt giảm kích thước tập lệnh Javascript từ
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
3đến
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
5. Định tâm theo chiều dọc của nội dung động
Vấn đề. Giữ phần tử HTML [có chiều cao không xác định] được căn giữa theo chiều dọc bên trong phần tử khác
Giải pháp. Đặt phần tử bên ngoài thành
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
21, sau đó chuyển đổi phần tử bên trong thành CSS document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
22. Hoặc chỉ cần sử dụng CSS FlexboxCó thể căn giữa theo chiều dọc một dòng văn bản với
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
23Xem Pen Vertical Centering of Dynamic Content 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Đối với nhiều dòng văn bản hoặc nội dung phi văn bản, bảng CSS là câu trả lời. Đặt màn hình của
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
2 thành document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
25, sau đó sử dụng document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
26 và document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
27 cho document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
28Xem Pen Vertical Centering of Dynamic Content 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Hãy nghĩ về thủ thuật CSS này tương đương theo chiều dọc của
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
29. Flexbox của CSS3 là một giải pháp thay thế tuyệt vời cho kỹ thuật này nếu được chấp nhậnXem Pen Vertical Centering of Dynamic Content 3 của Rico Mossesgeld [@ricotheque] trên CodePen
6. Cột có cùng chiều cao
Vấn đề. Giữ các cột có cùng chiều cao
Giải pháp. Đối với mỗi cột, hãy sử dụng giá trị âm lớn
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
30 và hủy bỏ giá trị đó bằng một giá trị lớn tương đương document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
9. Bảng CSS và Flexbox cũng hoạt độngSử dụng
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
32 hoặc document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
33, có thể tạo các cột cạnh nhau thông qua CSSXem Pen Same-Height Columns 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Lưu ý việc sử dụng
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
0 để định cỡ đúng cho document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
35. Xem Định cỡ phần tử HTML nhất quán ở trênĐường viền của cột đầu tiên và cột cuối cùng không đi xuống hết; . Để khắc phục điều này, chỉ cần thêm
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
4 vào document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
37. Sau đó, đặt document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
30 của mỗi document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
38 thành 99999px và document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
9 của nó thành 100009px [99999px + phần đệm 10px được áp dụng cho các cạnh khác của document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
38]Xem Pen Same-Height Columns 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Một giải pháp thay thế đơn giản hơn là Flexbox. Một lần nữa, chỉ sử dụng cái này nếu không cần hỗ trợ Internet Explorer
Xem Pen Same-Height Columns 3 của Rico Mossesgeld [@ricotheque] trên CodePen
Một giải pháp thay thế khác với hỗ trợ trình duyệt tốt hơn. Bảng CSS [không có
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
27]Xem Pen Same-Height Columns 4 của Rico Mossesgeld [@ricotheque] trên CodePen
7. Đi xa hơn hộp
Vấn đề. Hộp và đường thẳng rất sáo rỗng
Giải pháp. Sử dụng
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
43 hoặc document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
44Lấy một loạt các tấm điển hình từ một trang web tiếp thị hoặc tài liệu quảng cáo. một chồng slide thẳng đứng với một điểm kỳ dị. Đánh dấu và CSS của nó có thể trông giống như thế này
Xem Cây bút vượt ra ngoài hộp 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Với chi phí làm cho việc đánh dấu trở nên phức tạp hơn nhiều, các ô hình hộp này có thể được biến thành một chồng các hình bình hành
Xem Cây bút vượt ra ngoài hộp 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Có rất nhiều thứ đang diễn ra ở đây
Chiều cao của mỗi ô được điều khiển bởi. cửa sổ-container. Lề dưới âm đảm bảo các tấm xếp chồng lên nhau một cách khít khao
- ________ 245, con của nó là ________ 246, và cháu của nó là ________ 247 đều được đặt thành
6. Mỗi phần tử có các giá trịdocument.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
49,document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
50,document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
51 vàdocument.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
52 khác nhau. Điều này giúp loại bỏ bất kỳ khoảng cách nào được tạo bởi các phép quay được nêu chi tiết bên dướidocument.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
46 được xoay 2 độ [ngược chiều kim đồng hồ]document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
47 được xoay -2 độ để chống lại sự quay củadocument.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
46document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
- Phần tràn của
46 bị ẩn để các mặt trên và dưới được xoay của nó cắt phần tửdocument.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
47document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
Trên một ghi chú liên quan, biến một hình ảnh thành hình tròn hoặc hình bầu dục rất đơn giản. Chỉ cần áp dụng
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
58 cho phần tử document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
59Xem Cây bút vượt ra ngoài hộp 3 của Rico Mossesgeld [@ricotheque] trên CodePen
Các sửa đổi CSS theo thời gian thực chẳng hạn như những sửa đổi này giúp giảm bớt nhu cầu chuẩn bị nội dung trước khi xuất bản trên trang web. Thay vì áp dụng mặt nạ hình tròn cho ảnh trong Photoshop, nhà phát triển web chỉ có thể áp dụng hiệu ứng tương tự thông qua CSS mà không thay đổi ảnh gốc
Ưu điểm bổ sung là bằng cách để nguyên nội dung và không phụ thuộc vào thiết kế hiện tại của trang web, việc thiết kế lại hoặc cải tiến trong tương lai được tạo điều kiện thuận lợi
8. Chế độ ban đêm
Vấn đề. Triển khai chế độ ban đêm mà không cần tạo biểu định kiểu mới
Giải pháp. Sử dụng bộ lọc CSS
Một số ứng dụng có chế độ ban đêm, trong đó giao diện tối đi để dễ đọc hơn trong điều kiện ánh sáng yếu. Trên các trình duyệt mới hơn, các bộ lọc CSS có thể tạo hiệu ứng tương tự, bằng cách áp dụng các hiệu ứng giống như Photoshop
Một bộ lọc CSS hữu ích là
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
60, bộ lọc này [không có gì ngạc nhiên] sẽ đảo ngược màu sắc của mọi thứ bên trong một phần tử. Điều này làm cho việc tạo và áp dụng một bộ kiểu mới không cần thiếtXem Pen Night Mode 1 của Rico Mossesgeld [@ricotheque] trên CodePen
Sử dụng bộ lọc này trên văn bản màu đen và nền trắng mô phỏng chế độ ban đêm.
document.querySelector[ '.container' ].style.fontSize = yourDesiredHeight + 'px';
61 đảm bảo rằng những màu mới này sẽ ghi đè mọi kiểu hiện cóXem Pen Night Mode 2 của Rico Mossesgeld [@ricotheque] trên CodePen
Thật không may, hình ảnh trông kỳ lạ, bởi vì màu sắc của nó bị đảo ngược với mọi thứ khác. Tin tốt là nhiều bộ lọc có thể áp dụng cùng một lúc. Việc thêm bộ lọc xoay màu sắc sẽ chuyển hình ảnh và nội dung trực quan khác trở lại bình thường
Xem Pen Night Mode 3 của Rico Mossesgeld [@ricotheque] trên CodePen
Tại sao điều này làm việc? . Đây là bản demo về cách CSS ở chế độ ban đêm sẽ hoạt động khi được bật qua nút do JavaScript cung cấp
Tận dụng tối đa CSS
Trừ khi trình duyệt hoặc cách xây dựng trang web thay đổi đáng kể trong tương lai, kiến thức tốt về CSS sẽ vẫn là một kỹ năng cơ bản trong không gian phát triển web
Tất cả các mẹo CSS này đều có điểm chung. Họ tối đa hóa việc sử dụng CSS làm ngôn ngữ tạo kiểu, để trình duyệt tự thực hiện công việc nặng nhọc. Và, khi được thực hiện đúng, điều này sẽ luôn mang lại kết quả tốt hơn, hiệu suất tốt hơn và do đó mang lại trải nghiệm người dùng tốt hơn
Hãy cho chúng tôi biết nếu bạn có bất kỳ thủ thuật CSS nào mà bạn thấy thú vị và hữu ích trong phần bình luận bên dưới
Hiểu những điều cơ bản
Làm cách nào tôi có thể đặt chiều cao của DIV theo phần trăm chiều rộng của nó?
Sử dụng đệm dọc thay vì chiều cao. Thuộc tính chiều cao, khi được đặt dưới dạng phần trăm, được tính tương ứng với chiều cao của cấp độ gốc. Tuy nhiên, một DIV có chiều cao được đặt thành 0 có thể có phần đệm trên cùng hoặc phần đệm dưới cùng được đặt thành phần trăm chiều rộng của nó
Làm cách nào tôi có thể căn giữa nội dung của DIV theo chiều dọc?
Nếu đó chỉ là một dòng văn bản, hãy đặt "line-height" thành chiều cao của vùng chứa. Nếu đó là nội dung không phải văn bản, hãy bọc DIV trong một "màn hình. table" DIV và đặt DIV bên trong thành "display. ô bảng". Nếu hỗ trợ các trình duyệt web nguyên thủy không có trong danh sách việc cần làm của bạn, bạn luôn có thể sử dụng Flexbox
Thẻ
Thủ thuật CSSMẹoNgười làm việc tự do? Tìm công việc tiếp theo của bạn.
Việc làm Lập trình viên Front-End
Xem thông tin đầy đủ
Rico Mossesgeld
nhà phát triển
Giới thiệu về tác giả
Rico đã xây dựng các ấn phẩm và dịch vụ trực tuyến cho các cơ quan lớn, công ty truyền thông, cơ sở, quỹ và nhật báo lớn. Anh ấy dựa vào các kỹ năng giao tiếp chủ động của mình để giúp các đối tác tìm ra giải pháp và đã chia sẻ kiến thức chuyên môn về phát triển của mình với các đồng đội đến từ các quốc gia và múi giờ khác nhau
Thuê Rico
Bình luận
sương mù
Min-height would solve a lot of those without sabotaging accessibility, and basic flexbox has worked fine in IE for a while. [You'd also benefit from min-width: 0;] Just a heads-up. ETA: Oh, I'd forgotten about the filters. Does this not work? I don't know—I don't use the filters, but the CSS :not[] is quite useful. .container :not[.image] { /* put your settings here */ }
?
sương mù
Min-height would solve a lot of those without sabotaging accessibility, and basic flexbox has worked fine in IE for a while. [You'd also benefit from min-width: 0;] Just a heads-up. ETA: Oh, I'd forgotten about the filters. Does this not work? I don't know—I don't use the filters, but the CSS :not[] is quite useful. .container :not[.image] { /* put your settings here */ }
?
Juan Pablo Carzolio
ban đầu tôi nghĩ về. không quá, nhưng điều đó sẽ áp dụng bộ lọc cho trẻ em, không phải vùng chứa và nó có thể hoặc không phải là thứ bạn cần
Juan Pablo Carzolio
ban đầu tôi nghĩ về. không quá, nhưng điều đó sẽ áp dụng bộ lọc cho trẻ em, không phải vùng chứa và nó có thể hoặc không phải là thứ bạn cần
Juan Pablo Carzolio
Cảm ơn vì bài báo. Trước đây, tôi đã sử dụng nhiều "thủ thuật" này và thấy chúng rất hữu ích [đặc biệt là tỷ lệ khung hình]. Một chi tiết nhỏ. liên quan đến phần cuối cùng, sự thay đổi màu sắc là không cần thiết [trên thực tế, nó đảo ngược các màu ban đầu, giữ cho bầu trời có màu cam]. Đảo ngược chỉ là những gì cần thiết để hoàn nguyên đảo ngược của vùng chứa và lấy lại bản gốc. Ngoài ra, có lẽ tôi cũng sẽ xóa bộ chọn hậu duệ [>] ngay lập tức để khớp với các hình ảnh được lồng sâu hơn. Chúc mừng
Juan Pablo Carzolio
Cảm ơn vì bài báo. Trước đây, tôi đã sử dụng nhiều "thủ thuật" này và thấy chúng rất hữu ích [đặc biệt là tỷ lệ khung hình]. Một chi tiết nhỏ. liên quan đến phần cuối cùng, sự thay đổi màu sắc là không cần thiết [trên thực tế, nó đảo ngược các màu ban đầu, giữ cho bầu trời có màu cam]. Đảo ngược chỉ là những gì cần thiết để hoàn nguyên đảo ngược của vùng chứa và lấy lại bản gốc. Ngoài ra, có lẽ tôi cũng sẽ xóa bộ chọn hậu duệ [>] ngay lập tức để khớp với các hình ảnh được lồng sâu hơn. Chúc mừng
Diego Díaz Ogni
Cảm ơn vì bài báo. Có một số thứ nên có trong hộp công cụ của mọi nhà phát triển giao diện người dùng giống như bộ chọn Liền kề hoặc Anh chị em. Như đã đọc trong @Carradee. disqus nhận xét việc sử dụng. not cũng là một bổ sung tuyệt vời, đại loại như `. không phải[. đang hoạt động]{hiển thị. không;}`. Ngăn việc phải chọn loại màn hình sẽ sử dụng khi bạn muốn hiển thị thứ gì đó [kế thừa]. Việc sử dụng `height` làm thuộc tính hơi nguy hiểm vì nó ngăn phần tử phát triển [thay vào đó, sử dụng `min-height` là một cách thực hành tốt hơn]. Ngoài ra, thuộc tính `user-select` là thứ cần thêm vào các mô-đun có thể thu gọn [có thể gõ] đó. Nó tránh làm nổi bật văn bản khi nhấp chuột [thêm một con trỏ vi sai cũng là một cách thực hành UX tốt]. Đối với các mẫu flexbox, đây là hướng dẫn đầy đủ cho bất kỳ ai cần tìm hiểu sâu hơn về các thuộc tính và khả năng tương thích. https. //www. đỉnh cao. com/front-end/how-to-build-css-only-smart-layouts-with-flexbox#discover-dynamite-computer-engineers-today Đối với căn chỉnh dọc Flexbox, bạn có thể chỉ cần đặt nó vào vùng chứa để đảm bảo rằng mọi . cột;` thay vào đó hãy sử dụng `justify-content`]. Cảm ơn một lần nữa cho bài viết và nhiều mẹo và thủ thuật
Diego Díaz Ogni
Cảm ơn vì bài báo. Có một số thứ nên có trong hộp công cụ của mọi nhà phát triển giao diện người dùng giống như bộ chọn Liền kề hoặc Anh chị em. Như đã đọc trong @Carradee. disqus nhận xét việc sử dụng. not cũng là một bổ sung tuyệt vời, đại loại như `. không phải[. đang hoạt động]{hiển thị. không;}`. Ngăn việc phải chọn loại màn hình sẽ sử dụng khi bạn muốn hiển thị thứ gì đó [kế thừa]. Việc sử dụng `height` làm thuộc tính hơi nguy hiểm vì nó ngăn phần tử phát triển [thay vào đó, sử dụng `min-height` là một cách thực hành tốt hơn]. Ngoài ra, thuộc tính `user-select` là thứ cần thêm vào các mô-đun có thể thu gọn [có thể gõ] đó. Nó tránh làm nổi bật văn bản khi nhấp chuột [thêm một con trỏ vi sai cũng là một cách thực hành UX tốt]. Đối với các mẫu flexbox, đây là hướng dẫn đầy đủ cho bất kỳ ai cần tìm hiểu sâu hơn về các thuộc tính và khả năng tương thích. https. //www. đỉnh cao. com/front-end/how-to-build-css-only-smart-layouts-with-flexbox#discover-dynamite-computer-engineers-today Đối với căn chỉnh dọc Flexbox, bạn có thể chỉ cần đặt nó vào vùng chứa để đảm bảo rằng mọi . cột;` thay vào đó hãy sử dụng `justify-content`]. Cảm ơn một lần nữa cho bài viết và nhiều mẹo và thủ thuật
Seth Anurag
Thông tin, sâu sắc và thiết thực. Thanks
Seth Anurag
Thông tin, sâu sắc và thiết thực. Thanks
ysub
Đây là danh sách tốt nhưng tôi muốn thêm một chiến thuật nữa mà tôi sử dụng để định tâm phần tử theo chiều dọc và đó là. hàng đầu. 50%; . dịchY[-50%]; . https. // codepen. io/anon/pen/zzqOXW?editors=1100