Nếu bạn làm việc như một nhà phát triển web mặt trước vào những năm 2000, bạn phải biết việc đối phó với các lỗi đơn giản nhất là khó đến mức 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à một khi một số lỗi bật lên, có thể mất nhiều ngày để điều hướng thông qua tệp CSS và xác định/giải quyết lỗi.
Sau đó vào năm 2006, Firebug ra đời.
Nó đã thay đổi khá nhiều sự phát triển trước (và đặc biệt là phần gỡ lỗi) qua đêm. Trên thực tế, nó rất tuyệt vời và hữu ích đến nỗi 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ủa người Viking có sẵn trong hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge và các trình phát hành khác. Và với tất cả các vấn đề nhỏ bé của nó, công cụ kiểm tra trực tuyến đã hoạt động khá tốt cho các nhà phát triển, tiết kiệm thời gian của họ và làm cho việc gỡ lỗi phía trước dễ dàng hơn nhiều lần.
Nhưng Evolution không bao giờ dừng lại, và hôm nay chúng tôi sẽ cho bạn thấy tiến bộ logic trong kiểm tra trước: quét CSS. CSS Scan.
Quét CSS là gì?
CSS Scan là một phần mở rộng trình duyệt hiện đại hoạt động tốt trong Chrome, Firefox, Safari, Edge và có thể bất kỳ trình duyệt dựa trên crom.
Mục đích của quét CSS là giúp bạn kiểm tra, sao chép và chỉnh sửa CSS theo cách nhanh nhất, giúp bạn tiết kiệm hàng tấn thời gian.
Vấn đề chính với công cụ kiểm tra trên mạng là nó cung cấp quá nhiều dữ liệu, khiến cho việc điều hướng và chỉ sao chép các quy tắc CSS thực sự cần thiết trong khi bỏ qua các kiểu dư thừa:
Hơn nữa, công cụ kiểm tra trên mạng, người coi HTML và CSS là các thực thể riêng biệt, vì vậy việc sao chép ngay cả một nút đơn giản đòi hỏi nhiều bước để có được cấu trúc HTML và kiểu CSS làm cho nó sáng và tỏa sáng.
Phần mở rộng CSS quét giải quyết các vấn đề này khá tốt.
Không có nhấp chuột phải và không kiểm tra.
Không có phong cách tẻ nhạt để trải qua.
Chỉ cần nhấp chuột trái yếu tố bạn thích trên một trang web và bạn sẽ có các quy tắc CSS sẵn sàng để tạo nút chính xác đó trên trang web của riêng bạn.
Và miễn là bạn muốn, đó cũng là một cú nhấp chuột sẽ sao chép các bộ chọn CSS và cấu trúc HTML.
Nghe có vẻ tốt? Hãy để tôi chỉ cho bạn cách bắt đầu sử dụng CSS Scan ngay hôm nay.
Làm thế 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 phần mở rộng trình duyệt, vì vậy điều đầu tiên cần làm là truy cập cửa hàng mở rộng 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 ở đây. Và nếu bạn sử dụng Firefox, Safari hoặc Edge, bạn sẽ nhận được hướng dẫn khi bạn mua nó.
Nhấp vào nút Thêm màu xanh lam vào nút Chrome và phần mở rộng sẽ được cài đặt trong trình duyệt của bạn ngay lập tức:
Đó là một phần mở rộng cao cấp, vì vậy lần đầu tiên bạn mở nó, bạn sẽ cần thêm khóa cấp phép (mà bạn có thể có được tại trang web chính thức của CSS Scan):
Chỉ cần nhập khóa 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ễ nhất.
Làm thế nào để thiết lập quét CSS?
Ngay 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 trên mạng sẽ tạm dừng phần mở rộng, vì vậy thanh công cụ có thể nhìn thấy, bạn sẽ không còn thấy cửa sổ CSS trôi nổi xung quanh bất cứ khi nào bạn di chuột qua các yếu tố và bạn có thể tự do nhấp vào trang web.
Tùy chọn di chuyển trên mạng 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ó, như các tiêu đề.
Và để sử dụng nó một cách tối ưu và theo sở thích của bạn, bạn nên kiểm tra các tùy chọn của mục tiêu trước:
Có khá nhiều lựa chọn và sở thích để trải 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 phong cách cha mẹ và con cái, chuyển đổi các đơn vị kích thước phông chữ sang pixel, có nên bỏ qua quy mô hộp và các đơn vị khác hay không.
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 trên chuột bất cứ khi nào có thể:
Và một khi bạn chọn các tùy chọn hoạt động tốt nhất cho bạn, đó là thời gian để thực sự bắt đầu sao chép các kiểu phần tử theo cách dễ nhất có thể.
Nỗi đau của việc sử dụng công cụ kiểm tra
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ỳ yếu tố và CS nào từ bất kỳ trang web nào có sẵn công khai.
Cách dễ dàng sẽ theo trong phần tiếp theo vì ngược lại, hãy để xem điều này khó khăn như thế nào với công cụ kiểm tra.
Trên trang chủ của trang web BBC, hãy để Lừa 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 màu đỏ, sau đó một bộ các mục danh sách được đánh số theo cách sành điệu. Và như một liên lạc cuối cùng, mỗi mục danh sách ngay lập tức có một sắc thái khác nhau của nền.
Thông thường, chúng tôi có thể sử dụng công cụ kiểm tra Chrome để sao chép HTML:
Và điều đó không có vẻ khó khăn.
Nhưng nhận được CSS cho toàn bộ danh sách, trong khi giữ cho những thứ dư thừa tránh đường, thực sự là khó khăn.
Như bạn có thể thấy, chúng tôi có div phổ biến nhất của người Viking, sau đó là div danh sách hàng đầu của nhóm, một, và sau đó là danh sách chứa nhiều yếu tố.
Mỗi chứa một thẻ và trong mỗi thẻ, chúng ta có A và A, cộng với :: Sau phần tử giả.
Mặc dù chúng tôi không phải sao chép từng yếu tố lặp đi lặp lại (như và), chúng tôi vẫn cần sao chép riêng các quy tắc CSS của 9 yếu tố đặc biệt trong thiết kế danh sách này!
Và bạn có thể nghĩ không sao, chúng tôi sẽ sao chép 9 quy tắc CSS cho từng bộ chọn riêng biệt.
Nhưng bạn có biết CSS nào để sao chép không?
Như bạn có thể thấy từ ảnh chụp màn hình ở trên, chỉ có CSS cho nó lớn đến mức nó có thể phù hợp với màn hình.
Và chúng tôi có 9 yếu tố để trải qua, cộng với việc loại trừ một tấn CSS thực sự cần thiết, nhưng Chrome đang hiển thị bất kỳ phong cách 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ụng.
Cách dễ dàng sao chép HTML và CSS từ bất kỳ trang web nào có quét CSS
Hãy cùng đi đến cùng một 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 phần tử con CSS CSS và HTML:
Ngoài ra, để dễ dàng nhắm mục tiêu toàn bộ phần, trong khi lơ lửng 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 cha mẹ, anh chị em và các yếu tố con.
Bây giờ hãy nhấp vào Tiếp tục tiếp tục và phần mở rộng sẽ sẵn sàng để sử dụng.
Di chuột qua bất kỳ yếu tố nào sẽ cung cấp ngay cho bạn mã cần thiết để tạo lại yếu 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 yếu tố duy nhấ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 đó bằng một di chuột và nhấp chuột:
Như bạn có thể thấy ở trên, chúng tôi đã di chuột toàn bộ phần tử, vì vậy tất cả các yếu tố con và CSS liên quan sẽ được bao gồm.
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 bảng tạm của bạn:
Đó là nó!
Bây giờ mã được sao chép, bạn có thể dán nó ngay vào mã nguồn trang web của mình, nhưng chỉ để xem nó có hoạt động không Mã từ bảng tạm của bạn:
Lưu tệp, sau đó mở nó trong trình duyệt của bạn:
Thật dễ dàng và tuyệt vời là điều đó!
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 thanh không gian):
Xem xét thêm khi sử dụng quét CSS
Như đã trình bày ở trên, tiện ích mở rộng quét CSS 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ù nó là một tiện ích mở rộng phải trả tiền, nó sẽ giúp bạn tiết kiệm rất nhiều thời gian và trả hết trong vài ngày nếu không phải là vài phút.
Nhưng điều này không phải là tất cả!
Mặc dù phần mở rộng được sử dụng đơn giản để sử dụng, nhưng nó được đóng gói với các tùy chọn mạnh mẽ mà chỉ đơ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 trực tiếp mã HTML/CSS sang Codepen, để dễ dàng kiểm tra và chia sẻ với các đồng nghiệp và đồng nghiệp của bạn.
Và không giống như công cụ kiểm tra trên mạng, 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ả những bộ chọn giả.
Các bộ chọn như: Hover,: Trước và: Sau khi được kết hợp, vì vậy, không chỉ nút sao chép của bạn sẽ trông tuyệt vời, mà còn tương tác như trên trang web gốc!
Chỉnh sửa CSS khi đang bay với CSS Scan
Nếu bạn thích khả năng thay đổi mã CSS một cách nhanh chóng trong công cụ kiểm tra trực tuyến, bạn sẽ rất vui khi biết rằng điều này cũng có thể xảy ra trong việc quét CSS.
Tất cả những gì bạn cần làm là nhấn thanh không gian trên bàn phím của bạn trong khi di chuột qua phần tử bạn muốn sao chép. Điều này sẽ khóa cửa sổ kiểu vào vị trí và cho phép bạn thực hiện các thay đổi trực tiếp.
Hãy nói rằng 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.
Di chuột qua phần tử tiêu đề và nhấn thanh không gian, sau đó di chuột qua phần tử số và nhấn lại thanh không gian.
Điều này sẽ khóa các trình chỉnh sửa mã cho cả hai yếu tố tại chỗ. Bây giờ chỉ cần thay đổi màu từ trình soạn thảo:
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 bạn.
Giống như tất cả điều này là đủ, 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 các 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, đó là một niềm vui thực sự khi sử dụng tiện ích mở rộng CSS Scan để nhanh chóng lấy kiểu và đánh dấu. Nó rất dễ sử dụng và đóng gói với các tính năng mạnh mẽ, bạn cần thử nó để tin vào điều đó!
Và sau đó, bạn sẽ biết cách dễ nhất để sao chép mã HTML/CSS được tối ưu hóa và tối ưu hóa từ bất kỳ trang web nào!