Độ nhạy khoảng trắng HTML
|
Khoảng trắng là bất kỳ chuỗi văn bản nào chỉ bao gồm khoảng trắng, tab hoặc ngắt dòng (chính xác là chuỗi CRLF, dấu xuống dòng hoặc nguồn cấp dữ liệu dòng) Show Là dân viết code chắc hẳn bạn cũng biết tầm quan trọng sống còn của những ký tự này. Chúng cho phép bạn định dạng mã của mình theo cách giúp bạn và những người khác dễ dàng đọc mã đó. Trên thực tế, phần lớn mã nguồn của chúng tôi chứa đầy các ký tự khoảng trắng này (nghĩa là, trừ khi bạn viết mã bị xáo trộn). Chúng thường được sử dụng để ngắt mã trên nhiều dòng và thụt vào dòng để thể hiện việc lồng các phần tử Tuy nhiên, vì những ký tự này quan trọng đối với những người đọc mã không có nghĩa là chúng quan trọng đối với những người truy cập trang web của bạn. Những ký tự chỉ định dạng này trông sẽ không đẹp lắm nếu chúng ảnh hưởng đến bố cục trang của bạn, phải không? Hãy lấy một ví dụ đơn giản Mã nguồn này chứa một nguồn cấp dữ liệu dòng sau DOCTYPE và một loạt các ký tự khoảng trắng trước và bên trong thẻ h1, nhưng trình duyệt dường như không quan tâm và chỉ hiển thị các từ Hello World. như thể những nhân vật này hoàn toàn không tồn tại Không giống như một ứng dụng xử lý văn bản, trình duyệt dường như hoàn toàn bỏ qua các khoảng trắng (ít nhất là hầu hết thời gian) CSS xử lý khoảng trắng như thế nào?Nếu hầu hết các ký tự khoảng trắng bị bỏ qua, thì không phải tất cả chúng đều. Trong ví dụ trước, khoảng cách giữa Hello và World. vẫn tồn tại khi trang được hiển thị trong trình duyệt. Vì vậy, phải có thứ gì đó trong công cụ trình duyệt quyết định ký tự khoảng trắng nào hữu ích và ký tự nào không. Nếu bạn là kiểu người thích đọc thông số kỹ thuật, bạn có thể thích thông số kỹ thuật Cấp 3 của Mô-đun văn bản CSS và đặc biệt là các phần về thuộc tính khoảng trắng CSS và chi tiết xử lý khoảng trắng, nhưng một lần nữa, nếu bạn thích Hãy lấy một ví dụ thực sự đơn giản khác (để dễ hiểu, tôi đã minh họa tất cả các khoảng trắng bằng ◦, tất cả các tab bằng ⇥ và tất cả các ngắt dòng bằng ⏎) Đó là cách đánh dấu ví dụ này được hiển thị trong trình duyệt Phần tử h1 chỉ chứa các phần tử nội tuyến. Trên thực tế, nó chứa một nút văn bản (bao gồm một số khoảng trắng, từ Xin chào và một số tab), một phần tử nội tuyến (khoảng cách chứa khoảng trắng và từ Thế giới. ) và một nút văn bản khác (chỉ bao gồm các tab và dấu cách) Do đó, nó thiết lập cái được gọi là bối cảnh định dạng nội tuyến. Đây là một trong những bối cảnh hiển thị bố cục có thể có mà các công cụ trình duyệt hoạt động với Trong bối cảnh này, các ký tự khoảng trắng được xử lý như sau (điều này được đơn giản hóa quá mức, thông số kỹ thuật sẽ đi vào chi tiết hơn nhiều)
Đó là lý do tại sao những người truy cập trang web sẽ chỉ thấy cụm từ Hello World. được viết đẹp mắt ở đầu trang, thay vì một chữ Hello thụt vào kỳ lạ theo sau mà là một Thế giới thụt vào thậm chí còn kỳ lạ hơn. trên dòng bên dưới đó Trên thực tế, khi sử dụng Firefox DevTools (kể từ phiên bản 52 hiện hỗ trợ đánh dấu các nút văn bản), bạn có thể thấy khoảng trắng ngăn cách 2 từ là một phần của nút chứa Hello giống như phần đánh dấu mà chúng tôi đã tạo ra sau khi áp dụng xử lý khoảng trắng Bây giờ chúng ta biết cách khoảng trắng được xử lý trong bối cảnh định dạng nội tuyến (hãy nhớ rằng về cơ bản là một phần tử chỉ chứa các phần tử nội tuyến) Bạn có thể tự hỏi khoảng trắng được xử lý như thế nào trong các loại ngữ cảnh khác và thậm chí những ngữ cảnh này là gì. Trong bối cảnh này, khoảng trắng được xử lý rất khác. Hãy cùng xem ví dụ này (xem trực tiếp tại https. //đội trưởngbrosset. github. io/white-space-article/example3. html) ________số 8Chúng tôi có 3 nút văn bản trong đó chỉ chứa khoảng trắng, một nút trước div đầu tiên, một nút giữa 2 div và một nút sau div thứ hai Các công cụ trình duyệt có thể đang tối ưu hóa điều này theo cách khác, nhưng để dễ hiểu, tôi sẽ giải thích như sau Bởi vì chúng ta đang ở trong ngữ cảnh định dạng khối, nên mọi thứ phải là một khối, vì vậy 3 nút văn bản của chúng ta cũng trở thành các khối, giống như 2 div. Chúng ta có thể đơn giản hóa hơn nữa bằng cách áp dụng các quy tắc xử lý khoảng trắng trong ngữ cảnh định dạng nội tuyến 3 khối trống mà chúng tôi hiện có sẽ không chiếm bất kỳ khoảng trống nào trong bố cục cuối cùng, bởi vì chúng không chứa bất cứ thứ gì, vì vậy chúng tôi thực sự sẽ chỉ định vị 2 khối trong trang. Và người xem trang web sẽ thấy dòng chữ Hello và sau đó là World. trên 2 dòng riêng biệt như bạn mong đợi sẽ có 2 div Vì vậy, trong trường hợp này, về cơ bản, công cụ trình duyệt đã bỏ qua tất cả khoảng trắng được thêm vào trong mã nguồn Tại sao chúng ta không thấy khoảng trắng trong devtools?Trong phần trước, chúng ta đã thấy khoảng trắng thường bị bỏ qua như thế nào khi hiển thị bố cục, nhưng chúng ta đã nói rằng nó vẫn đóng một vai trò trong cây DOM. Các nút văn bản vẫn đang được tạo trong cây DOM của trang, vì vậy đoạn mã sau ________số 8vẫn tạo ra cây sau Và công việc chính của bất kỳ bảng kiểm tra nào trong bất kỳ công cụ phát triển nào hiện có là hiển thị cây DOM, nhưng nếu bạn tự mình thử, bạn sẽ thấy rằng các nút văn bản này không có ở đó Lý do là nếu công cụ trình duyệt bỏ qua các nút văn bản chỉ có khoảng trắng này khi tạo bố cục, thì có lẽ devtools cũng có thể bỏ qua chúng. Rốt cuộc, tác giả chỉ sử dụng chúng để định dạng và khách truy cập không nhìn thấy chúng. Vì vậy, không có nhu cầu thực sự cho devtools để hiển thị chúng Trên thực tế, có những trường hợp hiển thị các nút văn bản khoảng trắng trong devtools có thể hữu ích. Các phần sau đây sẽ mô tả chúng là gì Khoảng cách giữa các phần tử nội tuyến và khối nội tuyếnTrên thực tế, chúng ta đã thấy điều này với ví dụ đầu tiên trong bài viết này, khi chúng ta mô tả cách khoảng trắng được xử lý bên trong ngữ cảnh định dạng nội tuyến Chúng tôi đã nói rằng có các quy tắc để bỏ qua hầu hết các ký tự nhưng về cơ bản, các khoảng trắng nhất định vẫn giữ nguyên để phân tách các từ Vì vậy, khi bạn thực sự chỉ xử lý văn bản, các đoạn có thể chứa các phần tử nội tuyến như em, Strong, span, v.v. bạn thường không quan tâm đến điều này bởi vì các khoảng trắng thừa trong bố cục thực sự hữu ích để phân tách các từ Nhưng sẽ thú vị hơn khi bạn bắt đầu sử dụng các phần tử khối nội tuyến. Các phần tử này xuất hiện dưới dạng các phần tử nội tuyến từ bên ngoài, nhưng hoạt động giống như các khối ở bên trong, vì vậy chúng thường được sử dụng để hiển thị các phần giao diện người dùng phức tạp hơn là chỉ văn bản cạnh nhau trên cùng một dòng (giống như khi bạn thả nổi các khối) Tôi nghĩ kỳ vọng từ các nhà phát triển web là bởi vì chúng là các khối nên chúng sẽ hoạt động như vậy và chỉ xếp cạnh nhau (chứ không phải chồng lên nhau), nhưng thực sự chúng không. Nếu có khoảng trắng định dạng trong phần đánh dấu giữa chúng, thì điều đó sẽ tạo ra khoảng trống trong bố cục giống như giữa văn bản Hãy xem xét ví dụ này Nếu bạn mở cái này trong trình duyệt, bạn sẽ thấy kết quả sau Đó có lẽ không phải là những gì bạn dự định. Giả sử đây là danh sách ảnh đại diện của mọi người và bạn muốn chúng hiển thị như thế này thay vào đó Chà, đây là một vấn đề về bố cục CSS rất phổ biến và các câu hỏi cũng như bài báo đã được viết về vấn đề này. Có các giải pháp tồn tại, những thứ như loại bỏ hoàn toàn khoảng trắng, đặt cỡ chữ của bạn thành 0 hoặc sử dụng lề âm, v.v. Điều thú vị ở đây không thực sự là giải pháp cho vấn đề phổ biến này, mà thực tế đây là một vấn đề phổ biến và nhiều nhà phát triển web đã dành ít nhất một chút thời gian để đối mặt với. Bởi vì các nút văn bản tương ứng không có trong devtools, mọi người sẽ mất thời gian cho vấn đề phổ biến này nếu họ chưa từng gặp phải nó trước đây. Họ sẽ kiểm tra xem có tiền ký quỹ ở đâu đó không nhưng sẽ không tìm thấy bất kỳ Vì vậy, đó là một ví dụ về việc hiển thị các nút văn bản khoảng trắng trong devtools sẽ thực sự hữu ích. Hãy xem một cái khác Kiểm soát hiển thị khoảng trắngSử dụng thuộc tính khoảng trắng CSS, bạn có thể kiểm soát cách các ký tự khoảng trắng được xử lý khi bối cảnh định dạng nội tuyến nhất định được đặt ra thủ thuật css. com có một bài viết hay về bất động sản này Điều quan trọng là nếu bạn đặt thuộc tính này thành pre, pre-wrap hoặc pre-line, điều này sẽ thực sự tôn vinh một số hoặc tất cả ký tự khoảng trắng trong mã HTML nguồn và chúng sẽ bắt đầu chiếm khoảng trống trong bố cục Nếu chúng ta lấy một ví dụ đơn giản từ trước đó Nhưng thêm quy tắc CSS sau Sau đó chúng tôi kết thúc với cách bố trí sau Như bạn có thể thấy ở trên, bố cục bên trong phần tử h1 tôn trọng định dạng của tệp HTML nguồn. Có một khoảng trống trước từ Xin chào, sau đó là ngắt dòng, sau đó thêm khoảng trắng và từ Thế giới Trên thực tế, như bạn có thể thấy, nút đầu tiên được hiển thị trong devtools bên trong phần tử h1 là một nút văn bản và việc di chuột qua nút này sẽ làm nổi bật khoảng trống mà nút đó chiếm trong trang Di chuột qua phần tử span cũng làm nổi bật khoảng trống được chiếm trong trang và đặc biệt, bạn có thể thấy khoảng trắng trước từ World. đến từ Do đó, đó là lý do thứ hai tại sao devtools nên hiển thị các nút văn bản khoảng trắng. Thật vậy, ai đó cố gắng hiểu bố cục và không biết về thuộc tính khoảng trắng có thể bị nhầm lẫn Firefox DevTools để giải cứuBắt đầu với phiên bản 52 của Firefox, bảng điều khiển trình kiểm tra hiển thị các nút văn bản khoảng trắng khi chúng có tác động đến bố cục và cũng làm nổi bật chúng trong trang Làm cách nào để trình kiểm tra biết khi nào một nút tác động đến bố cục? . Khi một nút văn bản bị bỏ qua, nó sẽ có chiều rộng và chiều cao bằng 0, nhưng khi nó tham gia vào bố cục, nó sẽ có một số kích thước. Như bạn có thể thấy ở trên, các nút văn bản khoảng trắng có kích thước trong trang hiện được hiển thị trong bảng điều khiển của trình kiểm tra và nếu bạn di chuột qua chúng, chúng cũng được đánh dấu trong trang để bạn biết chính xác vị trí và cách thức của chúng. Bằng cách này, nếu ban đầu bạn bối rối về lý do tại sao các hình đại diện trong trang không nằm cạnh nhau, thì bây giờ bạn sẽ hiểu rất rõ ràng tại sao lại như vậy. Không còn mất thời gian tìm kiếm lợi nhuận không có ở đó hoặc tạo truy vấn tìm kiếm google phù hợp sẽ cung cấp cho bạn câu trả lời Trên thực tế, bạn thậm chí có thể xóa các nút văn bản này và thấy rằng các phần tử khối nội tuyến hiện được hiển thị chính xác như bạn muốn |
