Bạn có lẽ đã gặp chuyện này. Bạn sao chép một khối được tạo kiểu đẹp — một thẻ tiêu đề, một chú thích có màu — và dán nó vào trình chỉnh sửa WeChat hay một CMS. Đôi khi nó đến trông đúng y hệt. Lần khác nó rơi xuống thành văn bản trần với mọi thiết kế bị lột sạch. Cùng hành động, kết quả khác, và cảm giác ngẫu nhiên. Không phải vậy. Khác biệt là bạn có sao chép inline HTML hay không.
Hiểu một ý này khiến việc dán nội dung đã tạo kiểu trở nên đoán trước được thay vì một canh bạc.
Inline HTML thực sự là gì
Kiểu dáng web có thể nằm ở hai nơi. Trong một website bình thường, kiểu dáng nằm trong một bảng kiểu riêng, và HTML chỉ tham chiếu nó bằng tên lớp: <div class="title-card">. Cái div tự nó vô nghĩa — thiết kế sống trong một file CSS ở đâu đó khác.
Inline HTML đặt kiểu dáng bên trong chính phần tử đó: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Mọi thứ cần để kết xuất khối đi cùng khối. Không có file bên ngoài nào để phụ thuộc.
Sự phân biệt đó là cả câu chuyện về vì sao một số lần dán giữ được thiết kế và số khác thì không. Khi bạn dán vào một trình chỉnh sửa, trình chỉnh sửa không nhận được bảng kiểu của website nguồn. Nếu thiết kế sống trong bảng kiểu đó, nó biến mất — bạn nhận cấu trúc trần, tức là văn bản trông trơn. Nếu thiết kế là inline, nó đi theo, và khối kết xuất đúng.
Vì sao WeChat và các trình chỉnh sửa văn bản đa dạng cần nó
Trình chỉnh sửa của WeChat nghiêm ngặt. Nó gỡ các bảng kiểu bên ngoài và lọc rất nhiều kiểu dáng. Một khối dựa vào một lớp định nghĩa ở nơi khác chẳng có gì để bấu víu một khi nó ở bên trong WeChat. Nhiều trình chỉnh sửa văn bản đa dạng và ô dán của CMS hành xử tương tự — chúng làm sạch những gì bạn dán và chỉ giữ các thuộc tính inline.
Vậy nên cách đáng tin để đưa một khối đã tạo kiểu vào các trình chỉnh sửa này là sao chép nó dưới dạng inline HTML, nơi kiểu dáng tự chứa. Khi đó ngay cả một trình chỉnh sửa nghiêm ngặt cũng có mọi thứ nó cần để hiển thị khối như đã thiết kế.
Việc sao chép một khối "kèm định dạng" hoạt động thế nào
Trình duyệt hiện đại có một Clipboard API có thể đặt nội dung phong phú — HTML kèm định dạng — lên clipboard, không chỉ văn bản thuần. Khi một công cụ sao chép một khối "dưới dạng inline HTML", nó đang dùng API đó để đặt mã đánh dấu tự chứa của khối lên clipboard của bạn. Sau đó bạn dán (Ctrl/Cmd+V) vào trình chỉnh sửa, và vì kiểu dáng là inline và clipboard mang theo HTML, khối hiện lên đã tạo kiểu.
Hai điều phải đúng để việc này hoạt động:
- Mã đánh dấu phải được tạo kiểu inline, để không cần file bên ngoài.
- Clipboard phải mang nó dưới dạng HTML, không phải một bãi văn bản thuần của các dấu ngoặc nhọn.
Làm đúng cả hai và việc dán "chỉ đơn giản là chạy". Sai một trong hai và bạn nhận văn bản thuần hoặc một bức tường mã hiện rõ.
Làm nó mà không sửa mã bằng tay
Về nguyên tắc, bạn có thể lấy một khối đã tạo kiểu và tự inline từng kiểu — chuyển các quy tắc của mỗi lớp vào một thuộc tính style="" trên mỗi phần tử. Với bất cứ thứ gì vượt một khối tầm thường, đó là việc tẻ nhạt và dễ sai, đặc biệt với các thẻ SVG nơi kiểu dáng trải khắp nhiều nút.
Một công cụ xử lý việc này thì dễ hơn. Công cụ Trích xuất Module Bố cục của IMG.DIY trích xuất các khối đã tạo kiểu từ nội dung WeChat được dán vào và cho mỗi cái một nút sao chép đặt nó lên clipboard của bạn dưới dạng inline HTML qua Clipboard API. Bạn nhấn sao chép, chuyển sang trình chỉnh sửa WeChat (hay CMS của bạn, hay một ô văn bản đa dạng), dán, và khối giữ được định dạng. Không inline bằng tay, không sửa mã hỏng.
Một danh sách kiểm tra dán nhanh
Khi một lần dán đã tạo kiểu bị hỏng, hãy rà qua cái này:
- Bạn có sao chép inline HTML, hay một ảnh chụp màn hình/văn bản thuần? Chỉ inline HTML dán ra thành một khối đã tạo kiểu hoạt động được.
- Dán vào phần thân bình thường của trình chỉnh sửa, không phải chế độ "mã nguồn" hay "văn bản thuần", thứ có thể lột hay thoát mã đánh dấu.
- Kiểm tra khối trong bản xem trước. Bản xem trước của chính WeChat cho thấy khối sẽ thực sự kết xuất thế nào trên điện thoại — hãy xác nhận ở đó trước khi xuất bản.
- Nếu màu trông sai, đổi màu trước khi sao chép. Trong công cụ trích xuất bạn có thể nhấn một màu và đổi nó ở mọi nơi trong khối, để bạn sao chép nó đã sẵn theo màu thương hiệu.
Một giới hạn thành thật đáng lặp lại: một công cụ như thế này sao chép và sắp xếp các khối — nó là một công cụ trích xuất, không phải một trình thiết kế mẫu từ đầu, và nó không thể lấy một bài viết theo URL (trình duyệt chặn việc lấy chéo trang các trang WeChat, nên bạn dán nội dung vào). Trong những giới hạn đó, inline HTML là thứ cho phép một khối đã tạo kiểu sống sót qua chuyến đi từ trình chỉnh sửa này sang trình chỉnh sửa khác với thiết kế nguyên vẹn.
Một khi bạn đã thấy một khối dán vào hoàn hảo vài lần, cái ngẫu nhiên trước đó trở nên có lý: nó chưa bao giờ ngẫu nhiên. Nó luôn là về việc kiểu dáng có đi bên trong khối hay không.