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 list that contains multiple elements.Each contains an tag, and within each tag, we have a and an , plus the ::after pseudo element.While we don’t have to copy each repetitive element (like and ), we still need to separately copy the CSS rules of 9 distinctive elements within this list design!Và bạn có thể nghĩ không sao, chúng tôi sẽ sao chép 9 quy tắc CSS cho mỗi bộ chọn riêng biệtNhưng bạn có biết nên sao chép CSS nào không?As you can see from the above screenshot, just the CSS for is so big that it can’t fit on the screen.Và chúng tôi có 9 yếu tố cần xem xét, cộng với việc loại trừ một TẤN CSS thực sự không cần thiết, nhưng Chrome đang hiển thị bất kỳ kiểu có liên quan nào ở đó, bất kể chúng có thực sự được sử dụng hay khôngĐây là nơi tiện ích mở rộng CSS Scan thực sự tiện dụngCách dễ dàng sao chép HTML và CSS từ bất kỳ trang web nào bằng CSS Scan

Hãy cùng xem lại danh sách trên trang chủ của BBC

Và sau đó mở các tùy chọn Quét CSS và đảm bảo rằng chúng tôi đang sao chép CSS và HTML của phần tử con

Ngoài ra, để dễ dàng nhắm mục tiêu toàn bộ phần, trong khi di chuột qua một phần tử, bạn có thể nhấn bàn phím mũi tên (lên và xuống) để điều hướng qua cây DOM để bạn có thể nhắm mục tiêu các phần tử cha mẹ, anh chị em và con

Bây giờ hãy nhấp vào “Tiếp tục” và tiện ích mở rộng sẽ sẵn sàng để sử dụng

Di chuột qua bất kỳ phần tử nào sẽ ngay lập tức cung cấp cho bạn các mã cần thiết để tạo lại phần tử đó

Và điều này thực sự hữu ích khi bạn muốn tạo lại một hoặc hai phần tử

Nhưng chúng tôi muốn tạo lại toàn bộ phần và chúng tôi cũng có thể làm điều đó chỉ bằng một lần di chuột và nhấp

As you can see above, we have hovered the entire

element, so all child elements and associated CSS will be included.

Bây giờ chỉ cần nhấp chuột trái vào nó và tất cả các quy tắc sẽ được sao chép vào khay nhớ tạm của bạn

Đó là nó

Bây giờ mã đã được sao chép, bạn có thể dán mã ngay vào mã nguồn trang web của mình, nhưng để xem mã có hoạt động hay không, hãy tạo một tệp mới có tên là “index. html” trên màn hình của bạn, sau đó mở trình chỉnh sửa mã bạn chọn và dán mã từ khay nhớ tạm của bạn

Lưu tệp, sau đó mở tệp trong trình duyệt của bạn

Thật dễ dàng và tuyệt vời làm sao

Bạn cũng có thể xuất nó sang Codepen và chơi với nó hoặc lưu nó trên đám mây bằng cách ghim cửa sổ CSS trước (nhấn phím cách)

Những cân nhắc khác khi sử dụng CSS Scan

Như đã trình bày ở trên, tiện ích mở rộng CSS Scan có lẽ là cách dễ nhất để thu thập HTML và CSS từ bất kỳ trang web nào

Mặc dù là tiện ích mở rộng trả phí, nhưng nó sẽ giúp bạn tiết kiệm rất nhiều thời gian và trả hết trong vòng vài ngày nếu không muốn nói là vài phút

Nhưng điều này không phải là tất cả

Mặc dù tiện ích mở rộng rất đơn giản để sử dụng, nhưng nó được tích hợp nhiều tùy chọn mạnh mẽ mà đơn giản là không thể phù hợp với bài viết này

Bắt đầu với CSS Scan 3. 0, bạn có thể xuất mã HTML/CSS trực tiếp sang Codepen, để dễ dàng kiểm tra và chia sẻ với đồng nghiệp và đồng nghiệp của mình

Và không giống như “Công cụ kiểm tra”, với CSS Scan, bạn có thể tự động sao chép không chỉ các bộ chọn tiêu chuẩn mà còn cả các bộ chọn giả

Bộ chọn chẳng hạn như. bay lượn,. trước và. after sẽ được kết hợp, do đó, không chỉ nút được sao chép của bạn sẽ trông tuyệt vời mà còn có tính tương tác như trên trang web gốc

Chỉnh sửa CSS nhanh chóng với CSS Scan

Nếu bạn thích khả năng thay đổi mã CSS nhanh chóng trong “Công cụ kiểm tra”, bạn sẽ rất vui khi biết rằng điều này cũng có thể thực hiện được trong CSS Scan

Tất cả những gì bạn cần làm là nhấn phím cách trên bàn phím trong khi di chuột qua phần tử bạn muốn sao chép. Thao tác này sẽ khóa cửa sổ kiểu vào đúng vị trí và cho phép bạn thực hiện các thay đổi trực tiếp

Giả sử bạn muốn thay đổi nền tiêu đề và màu của các số trong danh sách từ trên xuống

Di chuột qua phần tử tiêu đề và nhấn phím cách, sau đó di chuột qua phần tử số và nhấn lại phím cách

Điều này sẽ khóa trình chỉnh sửa mã cho cả hai phần tử tại chỗ. Bây giờ chỉ cần thay đổi màu từ trình chỉnh sửa

Sau đó, bạn chỉ cần sao chép mã bằng một cú nhấp chuột và đặt (các) phần tử vào dự án của mình

Giống như tất cả những điều này vẫn chưa đủ, CSS Scan không chỉ sao chép các kiểu cho thiết kế máy tính để bàn. Nó sẽ sao chép toàn bộ bộ quy tắc cho phần tử đó (hoặc nhiều phần tử), bao gồm các quy tắc cho mọi trình duyệt và độ phân giải có sẵn

Nói chung, thật thú vị khi sử dụng tiện ích mở rộng CSS Scan để nhanh chóng lấy các kiểu và đánh dấu. Nó rất dễ sử dụng và được tích hợp nhiều tính năng mạnh mẽ, bạn cần dùng thử để tin vào điều đó