Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Kiểu nội tuyến so với các lớp: Đọc HTML mà Trình chỉnh sửa trực quan tạo ra
· Cách thức hoạt động
html css contenteditable
Giải thích cách các lựa chọn định dạng trực quan trở thành thẻ, kiểu nội tuyến hoặc không có gì cả và cách điều chỉnh đầu ra đó cho phù hợp với trang web dựa trên biểu định kiểu.
Đoạn mã có vẻ phù hợp cho đến khi nó đáp ứng biểu định kiểu của bạn — mở ra với đầu ra của trình soạn thảo xung đột với trang web CSS
Một đoạn có thể trông chính xác trong ứng dụng nguồn vì thuộc tính style của nó chiến thắng cục bộ, sau đó xung đột với chủ đề đích hoặc mất thuộc tính đó trong quá trình xuất bản. ToolAcre chọn không thực hiện bản trình bày nội tuyến. Danh sách cho phép của nó loại bỏ phong cách và đẳng cấp ở mọi nơi, để lại các thành phần cấu trúc và ngữ nghĩa được hỗ trợ cho đích đến theo phong cách.
Chính sách đó làm cho bản xem trước trở nên khiêm tốn một cách có chủ ý. Tiêu đề, danh sách hoặc cụm từ mạnh vẫn có thể nhận dạng được nhưng màu sắc, phông chữ, khoảng cách và các lớp hệ thống thiết kế được sao chép đã biến mất. Đoạn mã đã được làm sạch dễ lý giải hơn, mặc dù nó không thể tái tạo mọi hình thức nguồn hoặc chức năng như một thành phần được tạo kiểu độc lập.
Nhìn chung có ba cách biểu diễn; trình soạn thảo này giữ các thẻ ngữ nghĩa và loại bỏ kiểu và lớp
HTML có thể diễn đạt ý nghĩa bằng các phần tử, bản trình bày cục bộ với thuộc tính kiểu hoặc bản trình bày có thể sử dụng lại với tên lớp được biểu định kiểu diễn giải. Các cơ chế này không thể thay thế cho nhau. Một yếu tố mạnh mẽ nói lên điều gì đó về tầm quan trọng; kiểu màu đỏ chỉ chọn một màu; một lớp chỉ có nghĩa là những gì một biểu định kiểu cụ thể xác định.
Trình soạn thảo này giữ một tập hợp con ngữ nghĩa và từ chối cả hai kênh trình bày. Ngay cả một lớp vô hại cũng không được đưa vào danh sách cho phép vì trang web nhận—không phải ToolAcre—sở hữu các định nghĩa lớp. Báo cáo xóa đặt tên cho thuộc tính bị loại bỏ để người viết có thể phân biệt việc dọn dẹp có chủ ý với thay đổi hình ảnh không giải thích được.
Tại sao trình soạn thảo này từ chối các kiểu nội tuyến thay vì giữ nguyên bản trình bày độc lập
Nhiều trình soạn thảo giữ nguyên các kiểu nội tuyến vì những khai báo đó di chuyển cùng với một đoạn được dán mà không yêu cầu biểu định kiểu bên ngoài. ToolAcre thực hiện giao dịch ngược lại: thuộc tính kiểu đủ rộng để tạo ra kết xuất không thể đoán trước và các bề mặt URL mang CSS, trong khi công cụ soạn thảo này chỉ cần văn bản có cấu trúc.
Các thử nghiệm bao gồm một giá trị kiểu chứa JavaScript có hình URL và chứng minh toàn bộ thuộc tính kiểu biến mất. Đó là bằng chứng cho bộ lọc hẹp chứ không phải khẳng định rằng mọi tải trọng CSS có thể có đều đã được phân loại độc lập. Việc không đưa bất kỳ kiểu nào vào danh sách cho phép sẽ tránh việc duy trì một phần bộ khử trùng CSS trong mô-đun này.
Ví dụ hoạt động: các định dạng mà thanh công cụ này thực sự cung cấp
Thanh công cụ cung cấp kiểu in đậm, in nghiêng, hai loại danh sách, định dạng rõ ràng, lựa chọn khối, liên kết và hủy liên kết. Đầu ra in đậm và in nghiêng sẽ bình thường hóa thành mạnh mẽ và em. Các lựa chọn khối bao gồm đoạn văn, h1 đến h4, blockquote và pre. Không có bộ chọn màu, bộ chọn phông chữ, hành động căn chỉnh hoặc trường lớp nào tồn tại.
Áp dụng các điều khiển đó cho một đoạn mẫu và kiểm tra nguồn. Sự so sánh hữu ích là giữa ý nghĩa dự định và các yếu tố được phát ra: một trích dẫn phải trở thành trích dẫn khối, khoảng cách giống như mã có thể sử dụng tiền tố và tiêu đề phải là tiêu đề. Không suy luận rằng hỗ trợ cho các thẻ gạch chân, chỉ số trên hoặc các thẻ khác trong danh sách cho phép chỉ vì chế độ nguồn có thể giữ lại chúng.
Điều chỉnh đầu ra có nghĩa là tạo kiểu cho nó ở đích; các lớp học không thể được tác giả ở đây
Quá trình điều chỉnh CMS bắt đầu sau khi xuất. Thêm các lớp đích trong CMS đó, một mẫu thành phần hoặc một phép chuyển đổi đã được đánh giá trong đó đã biết định nghĩa của chúng. ToolAcre không thể dịch các khai báo nội tuyến không xác định thành mã thông báo dành riêng cho dự án và không thể xác thực xem một lớp có tồn tại trong biểu định kiểu sản xuất của bạn hay không.
Giữ các thẻ ngữ nghĩa ở nơi chúng phù hợp với nội dung. Việc loại bỏ cấu trúc mạnh hoặc tiêu đề chỉ để làm cho mỗi nút trở thành một nhịp được tạo kiểu sẽ đảo ngược lợi ích của việc dọn dẹp. Lớp đích sẽ quyết định hình thức, trong khi bản nháp chứa các đoạn văn, thứ bậc, danh sách, trích dẫn, mã và liên kết vẫn có ý nghĩa mà không có chủ đề.
Kiểu nội tuyến có thể phù hợp với các quy trình công việc khác, nhưng chúng không được công cụ này xuất ra
Kiểu nội tuyến có thể cần thiết trong các hệ thống không lưu giữ hoặc tải biểu định kiểu được chia sẻ, đặc biệt là một số đường dẫn sản xuất email. Tuy nhiên, kho lưu trữ này không cung cấp bộ xử lý tương thích email và không phát ra thuộc tính kiểu. Người viết phải dịch bản nháp rõ ràng thông qua quy trình làm việc đã được kiểm tra, dành riêng cho email sau này.
Nội dung nhúng một lần có thể có những hạn chế tương tự nhưng điều đó không mở rộng hợp đồng của người biên tập này. Tài liệu đã tải xuống bao gồm biểu định kiểu xem trước cố định được biên soạn bởi ToolAcre xung quanh phần đánh dấu nội dung đã được làm sạch; sao chép đoạn không sao chép trình bao bọc đó hoặc CSS của nó. Kiểm tra hiện vật chính xác được giao đến đích.
Điều này không bao gồm những gì - CSS gỡ lỗi cụ thể, mã thông báo thiết kế hoặc công cụ chuyển đổi tự động
Bài viết này không tự động gỡ lỗi CSS, mã thông báo thiết kế bản đồ, kiểu nội tuyến hoặc hứa hẹn tính chẵn lẻ của pixel. Nó cũng tránh nói rằng các thẻ ngữ nghĩa buộc phải đưa ra thông báo hoặc xếp hạng tìm kiếm cụ thể trên trình đọc màn hình. Ngữ nghĩa cải thiện cấu trúc, trong khi cách trình bày và diễn giải thực tế vẫn phụ thuộc vào môi trường sử dụng.
Bản xem trước trong hộp cát là một bề mặt kiểm tra được hiển thị chứ không phải là mô hình của biểu định kiểu trực tiếp của bạn. Nó được ghim vào một chủ đề tài liệu nhẹ và không cấp cho tập lệnh, biểu mẫu hoặc quyền truy cập cùng nguồn gốc. Một bản xem trước rõ ràng không thể chứng minh rằng cùng một đoạn là an toàn hoặc chính xác về mặt hình ảnh trong mọi hệ thống xuất bản.
Bài học rút ra: đọc kết quả đầu ra, sau đó quyết định — tóm tắt lựa chọn và cách trình soạn thảo HTML WYSIWYG của ToolAcre cho phép bạn xem phần đánh dấu trước khi quyết định giữ lại nội dung nào
Đọc đầu ra, sau đó quyết định tại đích. ToolAcre cố ý biến tài liệu được dán theo kiểu thành từ vựng ngữ nghĩa nhỏ hơn, ghi lại các lần xóa và hiển thị nguồn để xem xét. Quy trình công việc đó ngăn việc trình bày nội tuyến vô tình trở thành nợ kỹ thuật vô hình trong khi chấp nhận rằng độ trung thực hình ảnh có thể giảm.
Thử nghiệm với nội dung mang tính đại diện thay vì toàn bộ chiến dịch chưa được xuất bản. Xác nhận tiêu đề, danh sách, điểm nhấn và liên kết; sau đó áp dụng các lớp đã được phê duyệt nơi nội dung sẽ tồn tại. Nếu yêu cầu chuyển pixel giống hệt nhau thì chính sách không có kiểu của công cụ này là không khớp, không phải là tính năng ẩn đang chờ được bật.