Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
lạc lối và các đoạn văn trống: Thói quen đánh dấu nhỏ làm hỏng bố cục
· Tại sao nó quan trọng
html text-cleanup contenteditable
Hiển thị cách các dấu cách kép, dấu ngắt quãng và dấu ngắt ở cuối trở thành các thực thể và các khối trống hoạt động sai trên màn hình hẹp cũng như cách phát hiện chúng trong đánh dấu.
Dòng không ngắt dòng trên thiết bị di động - mở ra bằng một tiêu đề được liên kết với nhau bằng dấu cách không ngắt quãng
Tiêu đề được nối với các khoảng trống không bị ngắt có thể từ chối nằm bên trong một tấm thẻ hẹp, đẩy phần chứa của nó rộng hơn hoặc tạo ra tình trạng tràn khó chịu. Các ký tự trông giống như khoảng trắng thông thường trong trình soạn thảo trực quan, vì vậy có thể cần kiểm tra nguồn hoặc công cụ nhận biết điểm mã để xác định nguyên nhân.
ToolAcre chuẩn hóa các thực thể thông qua bộ giải mã cục bộ và đường dẫn thoát, nhưng nó không có lệnh dành riêng cho việc tìm hoặc xóa các khoảng trắng không phá vỡ. Việc dọn dẹp một mảnh không phải là sửa chữa bố cục đáp ứng. Người viết phải kiểm tra văn bản và hoạt động của đích thay vì mong đợi danh sách cho phép thay đổi các ký tự khoảng cách hợp lệ.
Cách các khoảng trắng không ngắt có thể nhập nội dung; trình soạn thảo này không xác định quy tắc chèn đặc biệt nào
Khoảng trắng không bị phá vỡ có thể đến từ các tài liệu được dán, các thực thể có chủ ý hoặc các ứng dụng duy trì khoảng cách trực quan liên tiếp. Kho lưu trữ không chứng minh rằng ToolAcre tự chuyển đổi hai khoảng trắng đã nhập thành một khoảng trắng không ngắt, vì vậy bài viết này không chỉ định hành vi đó cho máy chủ có thể chỉnh sửa nội dung của nó.
Khi bộ giải mã thực thể biết tham chiếu có tên đã dán, trình khử trùng sẽ phân giải tham chiếu đó trước khi phát lại văn bản. Chính tả của tác giả có thể thay đổi trong khi ký tự cơ bản vẫn còn. Các tham chiếu có tên không xác định trong URL bị từ chối vì trình duyệt có thể hiểu nhiều thực thể hơn bảng nhỏ hơn này.
Các đoạn trống có khoảng cách - mô tả <p> </p> và theo sau <br> dùng để đẩy nội dung xuống
Các đoạn văn trống và phần tử br ở cuối thường được sử dụng làm khoảng cách thủ công. Chúng vẫn là các nút nội dung có chiều cao rõ ràng phụ thuộc vào đích CSS. ToolAcre chấp nhận p và br, do đó, một khối trống được phép hoặc ngắt không cần thiết sẽ không tự động bị từ chối vì không an toàn.
Nhấn Enter liên tục có thể tạo DOM phụ thuộc vào trình duyệt mà sau đó sẽ thu hẹp thông qua trình khử trùng. Vì bảng điều khiển không định cấu hình dấu phân cách hoặc hành vi của khóa hứa hẹn nên hãy kiểm tra kết quả. Xóa các cấu trúc trống không có ý nghĩa, sau đó sử dụng lề của biểu định kiểu và bố cục gốc ở đích.
Tại sao những bố cục này lại phá vỡ tính đáp ứng — bao gồm hành vi không bao bọc, các khoảng trống không nhất quán trên các thiết bị và lề xếp chồng lên nhau
Khoảng trắng không ngắt sẽ ngăn cản việc ngắt dòng đủ điều kiện tại vị trí của nó. Một số từ được nối với nhau có thể giữ một cụm từ lại với nhau vượt quá độ rộng có sẵn. Các khối trống sẽ thêm lề hoặc hộp dòng tùy theo kiểu, do đó, khoảng trống có vẻ chính xác trong một bản xem trước có thể tăng gấp đôi hoặc biến mất ở nơi khác.
Những hiệu ứng này phụ thuộc vào ngữ cảnh. Hộp cát sử dụng tài liệu nhẹ CSS của riêng nó và không thể sao chép thẻ CMS trên thiết bị di động hoặc ứng dụng email. Kiểm tra các điều kiện về chiều rộng, phông chữ và biểu định kiểu thực tế. Kiểm tra nguồn xác định nghi phạm; nó không thay thế các bài kiểm tra kết xuất trong môi trường đích.
Ví dụ đã hoạt động: kiểm tra một mẫu mà không yêu cầu số lượng hiện vật được tạo cố định
Tạo một tiêu đề mẫu có chủ ý không ngắt quãng, theo sau là một chữ p trống và một đoạn văn kết thúc bằng hai phần tử br. Xem nó ở độ rộng hẹp trong công cụ đích hoặc trình duyệt, sau đó kiểm tra nguồn ToolAcre để định vị từng ký tự và nút.
Chỉ loại bỏ các tạo phẩm không có mục đích ngữ nghĩa. Một địa chỉ có thể sử dụng br một cách hợp pháp và khoảng trắng không ngắt có thể liên kết chính xác một số với một đơn vị theo hướng dẫn kiểu. Câu hỏi đánh giá là liệu khối không có bọc hoặc khối trống có thể hiện ý nghĩa hay chỉ bù đắp cho một bố cục tạm thời.
Khắc phục tận gốc, không phải bằng CSS hack - giải thích việc loại bỏ các thói quen thay vì tạo kiểu xung quanh chúng
Sửa nội dung tại nguồn thay vì thêm bộ chọn CSS ngày càng cụ thể cho các khối trống. Xóa các đoạn đệm vô tình, thay thế các khoảng trắng trang trí lặp lại bằng văn bản thông thường và để thành phần trang kiểm soát nhịp điệu. Điều này tạo ra hành vi rõ ràng hơn trên các chiều rộng và chủ đề.
Đừng đưa ra một quy tắc chung che giấu mọi đoạn trống mà không xem xét hệ thống biên tập. Một số quy trình công việc có thể dựa vào chúng, ngay cả khi sự phụ thuộc đó cần được di chuyển. Bản chỉnh sửa cục bộ cộng với kế hoạch di chuyển được đo lường sẽ an toàn hơn bản vá CSS che giấu nội dung được lưu trữ không xác định.
Điều này không bao gồm những gì — CSS giãn cách các hệ thống hoặc dọn dẹp hàng loạt trên một trang web
Bài viết này không xác định hệ thống giãn cách trang, dọn dẹp cơ sở dữ liệu hàng loạt hoặc các quy tắc kiểu chữ phổ quát. Nó không hứa hẹn những thực thể nào mà bộ giải mã cục bộ nhận ra ngoài các trường hợp đã được thử nghiệm và nó tránh nói rằng tất cả các không gian kép trực quan đều bắt nguồn từ một ứng dụng.
Nó cũng không đánh đồng nguồn sạch với HTML thù địch an toàn. Hộp cát xem trước và danh sách cho phép hẹp của ToolAcre có ranh giới rõ ràng. Việc xuất bản máy chủ vẫn yêu cầu vệ sinh phù hợp, trong khi tính chính xác của phản hồi yêu cầu xem xét khả năng truy cập và kết xuất đích.
Bài học rút ra: đọc phần đánh dấu một lần cho mỗi bản nháp — tóm tắt danh sách kiểm tra và cách trình soạn thảo HTML WYSIWYG của ToolAcre hiển thị các thực thể và khối trống
Đọc phần đánh dấu một lần cho mỗi bản nháp, đặc biệt là sau khi dán nhiều định dạng và nhấn Enter nhiều lần. Tìm kiếm các ký tự không có dòng bọc, khối trống và dấu ngắt ở cuối, sau đó quyết định xem mỗi ký tự có mang ý nghĩa hay không. Các hiện vật nhỏ trở nên đắt đỏ khi được nhân rộng trên một kho lưu trữ và nhiều chủ đề.
ToolAcre làm cho cấu trúc được chấp nhận hiển thị và có thể viết lại phần không được hỗ trợ nhưng các thành phần tạo khoảng cách hợp lệ vẫn thuộc trách nhiệm biên tập. Loại bỏ chúng một cách có chủ ý, duy trì các khoảng nghỉ hợp pháp và kiểm tra kênh cuối cùng. Nguồn sạch và CSS linh hoạt phối hợp với nhau; không thể tự động suy ra cái kia.