programming css

Làm cách nào để lấy mã nguồn css từ một trang web?

Nếu bạn từng là nhà phát triển web front-end vào những năm 2000, bạn phải biết việc xử lý ngay cả những lỗi đơn giản nhất khó khăn như thế nào. Bạn có một trang HTML sử dụng tệp CSS và tệp CSS đó có thể phát triển khá lớn dựa trên kích thước và độ phức tạp của trang web. Và khi một số lỗi xuất hiện, có thể mất nhiều ngày để điều hướng qua tệp CSS và xác định/giải quyết lỗi

Rồi năm 2006, Firebug ra đời

Nó đã thay đổi khá nhiều sự phát triển của front-end [và đặc biệt là phần gỡ lỗi] chỉ sau một đêm. Trên thực tế, nó tuyệt vời và hữu ích đến mức các trình duyệt thời đó [như Chrome và Firefox] đã nhanh chóng kết hợp nó

Ngày nay, bạn có thể biết đây là một “công cụ Kiểm tra” có sẵn trong hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge, v.v. Và với tất cả các vấn đề “nhỏ” của nó, “công cụ Kiểm tra” hoạt động khá tốt đối với các nhà phát triển, tiết kiệm thời gian của họ và giúp việc gỡ lỗi giao diện người dùng dễ dàng hơn nhiều lần

Nhưng quá trình phát triển không bao giờ dừng lại và hôm nay chúng tôi sẽ cho bạn thấy tiến trình hợp lý trong kiểm tra đầu cuối. Quét CSS

Quét CSS là gì?

CSS Scan là một tiện ích mở rộng trình duyệt hiện đại hoạt động tốt trong Chrome, Firefox, Safari, Edge và có thể là bất kỳ trình duyệt dựa trên Chromium nào

Mục đích của CSS Scan là giúp bạn kiểm tra, sao chép và chỉnh sửa CSS một cách nhanh nhất, tiết kiệm rất nhiều thời gian

Vấn đề chính với “công cụ Kiểm tra” là nó cung cấp quá nhiều dữ liệu, khiến việc điều hướng và chỉ sao chép các quy tắc CSS thực sự cần thiết trở nên khó khăn trong khi bỏ qua các kiểu dư thừa

Hơn nữa, “Công cụ kiểm tra” coi HTML và CSS là các thực thể riêng biệt, do đó, việc sao chép ngay cả một nút đơn giản cũng cần thực hiện nhiều bước để có được cấu trúc HTML và các kiểu CSS làm cho nó sáng sủa và tỏa sáng.

Tiện ích mở rộng CSS Scan giải quyết những vấn đề này khá tốt

Không nhấp chuột phải và không kiểm tra

Không có phong cách tẻ nhạt để đi qua

Chỉ cần nhấp chuột trái vào phần tử bạn thích trên trang web và bạn sẽ có sẵn các quy tắc CSS để tạo chính xác nút đó trên trang web của riêng mình

Và miễn là bạn muốn, cùng một cú nhấp chuột đó sẽ sao chép cả bộ chọn CSS và cấu trúc HTML

Âm thanh tốt?

Làm cách nào để cài đặt tiện ích mở rộng CSS Scan trong trình duyệt của bạn?

CSS Scan là một tiện ích mở rộng của trình duyệt, vì vậy điều đầu tiên cần làm là vào cửa hàng tiện ích mở rộng của trình duyệt của bạn và tìm kiếm CSS Scan

Nếu sử dụng Chrome, bạn có thể làm như vậy tại đây. Và nếu bạn đang sử dụng Firefox, Safari hoặc Edge, bạn sẽ nhận được hướng dẫn khi mua nó

Nhấp vào nút “Thêm vào Chrome” màu xanh lam và tiện ích mở rộng sẽ được cài đặt trong trình duyệt của bạn ngay lập tức

Đây là một tiện ích mở rộng cao cấp, vì vậy, lần đầu tiên mở nó, bạn sẽ cần thêm mã cấp phép [bạn có thể lấy mã này tại trang web CSS Scan chính thức]

Chỉ cần nhập mã cấp phép của bạn, nhấp vào nút màu xanh lá cây và bạn sẽ sẵn sàng để kiểm tra HTML/CSS dễ dàng nhất

Làm cách nào để thiết lập Quét CSS?

Ngay sau khi bạn xác thực khóa cấp phép của mình, tiện ích mở rộng sẽ bắt đầu hoạt động

Tùy chọn “Tạm dừng” sẽ tạm dừng tiện ích mở rộng, do đó, thanh công cụ sẽ hiển thị, bạn sẽ không còn thấy cửa sổ CSS nổi xung quanh bất cứ khi nào bạn di chuột qua các phần tử và bạn có thể tự do nhấp vào khắp trang web

Tùy chọn “Di chuyển” sẽ di chuyển thanh công cụ mở rộng từ trên xuống dưới, trong trường hợp bạn muốn giữ nó ở đó hoặc có một số yếu tố đằng sau nó, chẳng hạn như tiêu đề

Và để sử dụng một cách tối ưu và theo sở thích của mình thì bạn nên tích vào mục “Tùy chọn” trước

Có khá nhiều tùy chọn và tùy chọn để xem qua và bạn có thể điều chỉnh chúng một cách nhanh chóng, tùy thuộc vào những gì bạn muốn làm tại thời điểm đó

Trong số những thứ khác, tiện ích mở rộng này cung cấp cho bạn khả năng chỉ sao chép CSS hoặc cả CSS và HTML, phải làm gì với kiểu dáng cha và con, chuyển đổi đơn vị kích thước phông chữ thành pixel, có bỏ qua kích thước hộp hay không, v.v.

Và ở cuối menu tùy chọn, bạn có một danh sách đẹp các phím tắt có sẵn, vì nhiều nhà phát triển thích bàn phím hơn chuột bất cứ khi nào có thể

Và khi bạn chọn các tùy chọn phù hợp nhất với mình, đã đến lúc thực sự bắt đầu sao chép các kiểu thành phần theo cách dễ nhất có thể

Nỗi đau khi sử dụng Công cụ kiểm tra

Trong ví dụ này, tôi sẽ sao chép một số kiểu và HTML từ trang chủ của BBC

Nhưng bạn có thể sử dụng cùng một cách dễ dàng để sao chép bất kỳ phần tử và CSS nào từ bất kỳ trang web nào có sẵn công khai

Cách dễ dàng sẽ có trong phần tiếp theo vì ngược lại, hãy xem việc này khó đến mức nào với Công cụ kiểm tra

Trên trang chủ của trang web BBC, chúng ta hãy xem yếu tố tin tức kinh doanh mới nhất

Nó có một tiêu đề màu trắng đẹp với nền đỏ, sau đó là một tập hợp các mục danh sách được đánh số một cách sành điệu. Và như một bước cuối cùng, mọi mục danh sách ngay lập tức có một màu nền khác nhau

“Thông thường”, chúng ta có thể sử dụng công cụ Chrome Inspect để sao chép HTML trước

Và điều đó có vẻ không khó lắm

Nhưng để có được CSS cho toàn bộ danh sách, đồng thời loại bỏ những thứ thừa thãi, thực sự rất khó

As you can see, we have the “most-popular” div, then the “top-list” div, an

, and then the