SnappySnippet
Cuối cùng tôi đã tìm thấy một chút thời gian để tạo ra công cụ này. Bạn có thể cài đặt SnappySnippet từ Github. Nó cho phép trích xuất HTML + CSS dễ dàng từ nút DOM được kiểm tra (kiểm tra lần cuối). Ngoài ra, bạn có thể gửi mã của mình thẳng đến CodePen hoặc JSFiddle. Thưởng thức!
Các tính năng khác
- làm sạch HTML (loại bỏ các thuộc tính không cần thiết, sửa lỗi thụt lề)
- tối ưu hóa CSS để làm cho nó dễ đọc
- cấu hình đầy đủ (tất cả các bộ lọc có thể được tắt)
- làm việc với
::beforevà ::aftercác yếu tố giả
- Giao diện người dùng đẹp nhờ các dự án Bootstrap & Flat-UI
Mã
SnappySnippet là mã nguồn mở và bạn có thể tìm thấy mã trên GitHub .
Thực hiện
Vì tôi đã học được khá nhiều trong khi thực hiện điều này, tôi đã quyết định chia sẻ một số vấn đề tôi gặp phải và giải pháp của tôi cho họ, có thể ai đó sẽ thấy nó thú vị.
Nỗ lực đầu tiên - getMatchedCSSRules ()
Lúc đầu, tôi đã thử truy xuất các quy tắc CSS gốc (đến từ các tệp CSS trên trang web). Thật đáng ngạc nhiên, điều này rất đơn giản nhờ window.getMatchedCSSRules(), tuy nhiên, nó đã không hoạt động tốt. Vấn đề là chúng tôi chỉ lấy một phần của bộ chọn HTML và CSS phù hợp với ngữ cảnh của toàn bộ tài liệu, không phù hợp nữa trong ngữ cảnh của đoạn mã HTML. Vì phân tích cú pháp và sửa đổi các bộ chọn dường như không phải là một ý tưởng hay, tôi đã từ bỏ nỗ lực này.
Lần thử thứ hai - getComputingStyle ()
Sau đó, tôi đã bắt đầu từ thứ gì đó mà @CollectiveCognition gợi ý - getComputedStyle(). Tuy nhiên, tôi thực sự muốn tách HTML dạng CSS thay vì nội tuyến tất cả các kiểu.
Vấn đề 1 - tách CSS khỏi HTML
Giải pháp ở đây không đẹp lắm nhưng khá đơn giản. Tôi đã gán ID cho tất cả các nút trong cây con đã chọn và sử dụng ID đó để tạo quy tắc CSS phù hợp.
Vấn đề 2 - loại bỏ các thuộc tính với các giá trị mặc định
Việc gán ID cho các nút hoạt động tốt, tuy nhiên tôi phát hiện ra rằng mỗi quy tắc CSS của tôi có ~ 300 thuộc tính làm cho toàn bộ CSS không thể đọc được.
Hóa ra getComputedStyle()trả về tất cả các thuộc tính và giá trị CSS có thể được tính cho phần tử đã cho. Một số trong số đó trống, một số có giá trị mặc định của trình duyệt. Để xóa các giá trị mặc định, trước tiên tôi phải lấy chúng khỏi trình duyệt (và mỗi thẻ có các giá trị mặc định khác nhau). Giải pháp là so sánh các kiểu của phần tử đến từ trang web với phần tử tương tự được chèn vào một khoảng trống <iframe>. Logic ở đây là không có biểu định kiểu nào trong một khoảng trống <iframe>, vì vậy mỗi phần tử tôi đã thêm vào chỉ có các kiểu trình duyệt mặc định. Bằng cách này, tôi đã có thể loại bỏ hầu hết các tài sản không đáng kể.
Vấn đề 3 - chỉ giữ các thuộc tính tốc ký
Điều tiếp theo tôi đã phát hiện ra là các thuộc tính có tốc ký tương đương được in ra một cách không cần thiết (ví dụ: có border: solid black 1pxvà sau đó border-color: black;, border-width: 1pxitd.).
Để giải quyết điều này, tôi chỉ cần tạo một danh sách các thuộc tính có tốc độ tương đương và lọc chúng ra khỏi kết quả.
Vấn đề 4 - loại bỏ các thuộc tính tiền tố
Số lượng tài sản trong từng quy tắc đã được giảm đáng kể sau ca phẫu thuật trước đó, nhưng tôi đã thấy rằng tôi Sill đã có rất nhiều -webkit-tính chất tiền tố mà tôi chưa bao giờ nghe về ( -webkit-app-region? -webkit-text-emphasis-position?).
Tôi đã tự hỏi nếu tôi nên giữ bất kỳ thuộc tính nào trong số này vì một số trong số chúng có vẻ hữu ích ( -webkit-transform-origin, -webkit-perspective-originv.v.). Mặc dù vậy, tôi vẫn chưa tìm ra cách xác minh điều này và vì tôi biết rằng hầu hết thời gian các tài sản này chỉ là rác, tôi quyết định loại bỏ tất cả.
Vấn đề 5 - kết hợp các quy tắc CSS giống nhau
Vấn đề tiếp theo tôi đã phát hiện ra là các quy tắc CSS giống nhau được lặp đi lặp lại (ví dụ: mỗi quy tắc có <li>cùng kiểu chính xác có cùng một quy tắc trong đầu ra CSS được tạo).
Đây chỉ là vấn đề so sánh các quy tắc với nhau và kết hợp các quy tắc có cùng một bộ thuộc tính và giá trị. Kết quả là, thay vì #LI_1{...}, #LI_2{...}tôi nhận được #LI_1, #LI_2 {...}.
Vấn đề 6 - dọn dẹp và sửa lỗi thụt lề HTML
Vì tôi hài lòng với kết quả này, tôi đã chuyển sang HTML. Nó trông giống như một mớ hỗn độn, chủ yếu là do outerHTMLtài sản giữ cho nó được định dạng chính xác như được trả lại từ máy chủ.
Điều duy nhất mã HTML được lấy từ outerHTMLcần thiết là một định dạng lại mã đơn giản. Vì nó là thứ có sẵn trong mọi IDE, tôi chắc chắn rằng có một thư viện JavaScript thực hiện chính xác điều đó. Và hóa ra tôi đã đúng (jquery-clean) . Hơn thế nữa, tôi đã có không cần thiết thêm loại bỏ các thuộc tính ( style, data-ng-repeatvv).
Vấn đề 7 - bộ lọc phá vỡ CSS
Vì có khả năng trong một số trường hợp, các bộ lọc được đề cập ở trên có thể phá vỡ CSS trong đoạn trích, tôi đã làm cho tất cả chúng là tùy chọn. Bạn có thể vô hiệu hóa chúng từ menu Cài đặt .
