Năm 2015, học CSS layout theo cách tỉ mỉ
(book.mixu.net)- Đây là tài liệu học theo từng chương được thiết kế để giúp độc giả đã từng dùng CSS hiểu thuật toán layout tới mức chi tiết từng quy tắc
- Tài liệu giải thích lại
inline,block,z-index, box model không chỉ như cách dùng đơn thuần mà như các quy tắc quyết định như formatting context và stacking context - Trong luồng thông thường, vị trí tương đối của phần tử block và inline không chỉ được quyết định bởi
display, mà còn bị ảnh hưởng cùng lúc bởi phần tử anh em và context - Kích thước của box model và cách tính
margin: autothay đổi theo phương thức định vị, nên khó ghi nhớ bằng một quy tắc duy nhất - Nội dung đi từ normal flow, float, định vị tuyệt đối, margin collapsing, overflow,
z-index, pseudo-element, Flexbox đến các bài toán layout thực tế như căn giữa và grid framework
Hiểu CSS layout bằng quy tắc
- Tài liệu này xem CSS layout không phải là tập hợp mẹo vặt mà là một hệ thống dựa trên quy tắc, và giải thích bằng cách lần lượt đi theo từng quy tắc qua các chương
- Đúng như cách diễn đạt “pedantic”, tài liệu theo đuổi cách tiếp cận xét đến cả những chi tiết tưởng như nhỏ nhặt và các quy tắc hình thức
- Đối tượng độc giả không phải là người mới học CSS, mà là người đã dùng CSS nhưng muốn hiểu hành vi layout một cách chặt chẽ hơn
- Vì website thường phát triển dần dần, người học rất dễ chỉ nắm layout qua các mẹo và thủ thuật nhỏ, và trong quá trình đó có thể bỏ lỡ chính thuật toán layout
- Tài liệu xử lý các khái niệm chính theo thứ tự, đồng thời cung cấp các ví dụ áp dụng để kiểm chứng từng khái niệm
Cấu trúc theo chương
- Chapter 1: Box positioning in CSS nói về cách các box do phần tử HTML tạo ra được sắp xếp với nhau
- Ba phương thức định vị chính của CSS: normal flow, float, định vị tuyệt đối
- anonymous box generation, formatting context, line box, căn chỉnh bên trong line box của normal flow
- thứ tự float, clearfix, tương tác giữa float và chiều cao phần tử cha
- Chapter 2: Box sizing in CSS nói về box model và sự khác biệt theo từng phương thức định vị
- Cách tính
height,width,margindùng các cơ chế khác nhau - Để hiểu cách tính, cần xem đồng thời phương thức định vị hiện tại và cơ chế tính toán
- Cách tính
- Chapter 3: Additional properties that influence positioning tổng hợp các thuộc tính và cơ chế bổ sung ảnh hưởng đến việc bố trí box
- margin collapsing, negative margins, overflow
max-width,max-height,min-width,min-height- stacking context và
z-index - ảnh hưởng của pseudo-element đến layout
- thuộc tính CSS3
box-sizing
- Chapter 4: Flexbox giải thích chế độ layout Flexbox của CSS 3
- Chapter 5: CSS layout - tricks and layout techniques áp dụng nội dung các chương trước vào các vấn đề thực tế
- căn giữa ngang và dọc
- cách hoạt động của CSS grid framework
- layout nhiều cột
- các bẫy thường gặp và mẹo layout
- reference index có thể dùng khi muốn tìm một khái niệm hoặc thuộc tính cụ thể rồi chuyển tới chương và mục liên quan
1 bình luận
Các ý kiến trên Hacker News
Điều đầu tiên cần nói khi giải thích về layout CSS là có bốn hệ thống layout khác nhau: table, loại cũ nhất vẫn còn dùng trong email; float, dành cho hình ảnh trong phần nội dung; flexbox, được dùng nhiều nhất hiện nay; và grid, phương án thay thế hiện đại cho table
Định vị absolute và fixed cũng có thể được dùng như những mẹo hack để đi vòng qua layout
absolutevàfixedkhông phải là hack, cũng không “đi vòng qua” layoutCả hai là hai trong năm tùy chọn định vị quy định cách phần tử được đặt và hoạt động trong luồng tài liệu hoặc trong một container cụ thể: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
Thuộc tính
floatcũng có thể dùng cùng với Grid. Luồng thông thường, hệ thống layout dễ nhất và cơ bản nhất, lại bị bỏ sót: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...Markup HTML table thực sự là một trong những cách lâu đời nhất để đặt các phần của trang web cạnh nhau và cũng được dùng trong email, nhưng đó là chuyện tách biệt với CSS
Trong CSS có
display: tablevà các giá trị liên quan, nhưng theo tôi nhớ thì trong IE cũ nó khó dùng hơn float và mức sử dụng cũng hạn chế. Tôi hầu như chưa từng thấy nó được dùng nhiều trên web hiện đại, có lẽ vì các yêu cầu về markup xung quanh quá khắt khe. Chẳng hạn không có cách nào đổi thứ tự, và nếu cần nhiều hàng thì phải đưa các phần tử đảm nhiệm vai trò đó vào trong HTMLVì chúng đổi các hành vi tương thích ngược cũ thành những giá trị mặc định hợp lý. Ví dụ: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
Mô tả rằng float “được dùng để đặt các box ở mép trái và phải của container box” là không chính xác
Có thể làm như vậy bằng float, nhưng từ khi flexbox và grid xuất hiện thì người ta không dùng nó theo cách đó nữa. Vì phần tử bị đưa ra khỏi luồng thông thường, đây là cách khiến người học CSS dễ bối rối khi tạo layout
floatgiống công cụ dàn trang chữ hơn là công cụ layout. Nếu bài viết tự nhận là pedantic thì cần phải tỉ mỉ hơnVề cơ bản chúng được tạo như một Microsoft Word cho các tệp nằm trên máy tính của người khác, nên phần lớn các thuộc tính ban đầu như
floatlà dành cho layout dàn trang chữNếu không còn chỗ, nó sẽ xuống dưới các phần tử trước. Nếu phần tử có
display: blockthì nó chiếm toàn bộ không gian ngang, nên mọi phần tử sau đó sẽ nổi xuống bên dưới nó. Vì vậy nó được gọi làfloat, và đó là cách tính vị trí phần tửDùng
float:left|rightsẽ ép phần tử đó nổi sang trái hoặc phải trước các phần tử khác trong cùng container. Tất nhiên nếu container dùng flex hoặc grid thì nó không còn hoạt động như vậy nữaĐặc biệt nếu xét đến việc vào thời điểm tác giả viết thì chưa có layout flexbox/grid, tôi thấy đây là một phần giải thích đủ tỉ mỉ
Nó giúp giảm việc phải bận tâm đến nhiều thuộc tính: https://flexboxcss.com
Nhất là khi ghi chú phải được căn theo vị trí tham chiếu ở giữa đoạn văn thì càng như vậy
Những bài kiểu này, dù là bài trước thời CSS Grid, vẫn khiến mình thấy hơi ngợp. Khi CSS Grid xuất hiện, bố cục CSS còn phức tạp hơn; dù đã làm web development 10 năm, mình vẫn có cảm giác CSS là thứ chưa biết độ sâu đến đâu
Cách nó hoạt động, các ngoại lệ hiếm gặp, cơ chế bên trong, số lượng tính năng khổng lồ là như vậy; gần đây mình cũng đã viết một bài liên quan
Chưa kịp nắm hết các chi tiết của Grid Layouting thì subgrid và container queries đã xuất hiện. Nhiều thuộc tính mới được thêm vào xử lý các trường hợp quá đặc thù đến mức không chắc có lúc nào dùng không (
hanging-punctuation,font-palettechẳng hạn)Chỉ riêng các thuộc tính liên quan đến xử lý gạch nối đoạn văn đã có ít nhất ba cái, và có thể bạn không biết rằng thuộc tính
filtercòn hỗ trợ cả một loại filter hoàn toàn khác dùng SVG. Bạn cũng có thể điều chỉnh thuật toán scale ảnh, vàborder-radiuscũng hỗ trợ góc dạng elipKỹ thuật nào cũng có thể nói như vậy, nhưng CSS thì khác. Nó xử lý quá nhiều thứ theo quá nhiều cách, và thay đổi quá nhiều, quá nhanh: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/
Mình đã dùng CSS còn lâu hơn, nhưng vì thậm chí không cố nhớ là
align-itemshayjustify-content, nên cũng chẳng nhớ nổi. Hễ dùng flexbox là mình mở https://css-tricks.com/snippets/css/a-guide-to-flexbox/Grid thì càng không nhớ. Nhưng sau vài lần càu nhàu và WTF, mình vẫn có thể tạo được thứ mình muốn khá dễ, nên không có cảm giác là không biết độ sâu của nó. Mình nghe nhiều người nói như vậy về CSS, nhưng trong phần lớn trường hợp, mình thấy tạo layout mong muốn mà không tốn nhiều công sức là khá dễ. Chỉ là mình không ghi nhớ CSS như với JS thôi
Cả hai đều có tài liệu tốt và tương đối trực quan; đặc biệt grid có ít hành vi kỳ quặc hơn
Ngày nay không cần biết quá sâu về flow layout, còn float và table layout thì có thể bỏ qua hoàn toàn. Chỉ nên dùng chúng cho đúng mục đích ban đầu: ảnh nổi trong nội dung văn bản và bảng thật sự
Lần đầu mình làm việc frontend thực sự và được trả bằng đô la, mình còn đang sinh DHTML trực tiếp từ perl. Ngay cả việc gõ chữ viết tắt đó cũng đã biến mất khỏi cache trí nhớ cơ bắp xa đến mức ngón tay còn khựng lại
Mình biết frontend ở mức một đứa sáu tuổi biết giải tích, nên giờ có cảm giác như không còn cách nào bắt kịp nữa
Có điều mình dùng plain CSS và thường cũng không có stylesheet toàn cục, nên khá hữu ích
Mình phát triển nhiều app UI, chủ yếu dùng Angular, và dạo này cứ dùng framework như Bootstrap hoặc Foundation
Vô số tùy chọn layout của CSS thuần, đặc biệt trong responsive design, thật choáng ngợp và đau đầu. Mình đã thử CSS thuần, nhưng cuối cùng lại dùng rất nhiều boilerplate và tự tạo ra thứ giống một mini framework
Nếu không phải đang làm website thiết kế riêng theo yêu cầu, cá nhân mình không thấy cần cứ phải phát minh lại bánh xe
CSS không nhất thiết là phát minh lại bánh xe; nó có thể giúp những layout khó hoặc những việc vốn cần JS trở nên dễ hơn và mạnh hơn
Bootstrap cũng ổn, nhưng để giải quyết các vấn đề layout nâng cao, mình thường phải inspect element rất nhiều để xem thực tế style nào đang được áp dụng. Ít nhất trải nghiệm của mình là vậy, nên cá nhân mình sẽ đặt cược vào phía CSS
Tính năng mới mình mong đợi là quy tắc
@scope, có vẻ sẽ giúp tạo style có phạm vi dễ hơn nhiềuhttps://open-props.style/
https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
Bài này được viết trước CSS Grid và CSS columns à?
Cũng có bài về z-index: https://philipwalton.com/articles/what-no-one-told-you-about...
Nhìn việc chương 3 đề cập đến margin collapsing và negative margins, bài này ưu tiên hiểu các kỹ thuật layout cũ
Khi xử lý codebase legacy thì có giá trị, nhưng với dự án mới thì tốt hơn nên tránh
Cách tốt nhất để học sâu về CSS là gì? Tài liệu chính thức cho cảm giác hơi kỳ lạ về việc cái gì hiện còn hợp lệ hay không
Nghĩ đến việc trong tiếng Hà Lan, current là
actueelcòn actual được dịch làdaadwerkelijkthì cũng dễ hiểu. Nếu người bản ngữ thấy nhầm lẫn thì có khi lại hữu íchCó thể điều này chỉ phù hợp với một số kiểu học nhất định, nhưng khi thực sự thao tác với style và layout, bạn chắc chắn sẽ thấm được khía cạnh thực dụng trong cách chúng hoạt động
Khi viết CSS, tôi đặt mục tiêu viết ít nhất có thể. Không phải vì tôi ghét CSS; ngược lại, tôi nghĩ nó bị mang tiếng xấu một cách bất công. Nhưng nhờ vậy bạn có thể học cách style layout hiệu quả hơn mà không chồng quá nhiều khai báo lên nhau
Tài liệu tốt nhất cho nền tảng CSS là https://web.dev/learn/css, trong đó có cả flexbox và grid
Về guideline thiết kế, tôi khuyên dùng Refactoring UI. Nó có nhiều lời khuyên có thể áp dụng được, điều mà các sách như The UX Book còn thiếu
Trong dự án của tôi, tôi dùng TailwindCSS của tác giả Refactoring UI cùng các component Daisy UI, nên thực tế không viết raw CSS. Ban đầu TailwindCSS có cảm giác như một bước lùi về inline CSS, nhưng đơn giản là nó tốt hơn các lựa chọn thay thế. Tôi khuyên bạn nên thử một lần
[1] https://drafts.csswg.org/
[2] https://developer.mozilla.org/en-US/docs/Web/CSS
Cái trước không phải là tài liệu học dành cho nhà phát triển web mới. Cái sau cũng không phải tài liệu chính thức hay có thẩm quyền tuyệt đối, nhưng thường có thông tin về Baseline support và bảng tương thích trình duyệt
marginvàpaddingCũng nên học cách cơ chế cascade của style hoạt động, rồi bạn sẽ hiểu vì sao người ta dùng SCSS và phát triển theo component để phần lớn khỏi phải bận tâm đến nó
Cứ học thêm media query và cách nhắm mục tiêu theo kích thước màn hình. Quan trọng nhất là đừng ngại tìm trên web “cách làm x trong CSS”. Đặc tả rất đồ sộ và có nhiều thứ phải nhớ, nên nếu không dùng thường xuyên trong thời gian dài thì không thể nhớ hết được