Cách khắc phục những phiền toái nhỏ trên web với [Firefox & Chrome] sành điệu

Cách khắc phục những phiền toái nhỏ trên web với [Firefox & Chrome] sành điệu

Các nhà thiết kế web có một công việc gần như không thể. Họ cần đưa ra một thiết kế làm hài lòng tất cả mọi người. Khi nói về một dịch vụ như Gmail, được sử dụng bởi vô số hàng triệu người trên khắp thế giới, bạn thực sự có thể bỏ qua phần 'gần như' - điều đó là không thể. Ngay cả khi một thiết kế lại được hầu hết mọi người thích, sẽ luôn có những người dùng thực sự không thích giao diện mới.





Đôi khi có đủ những người dùng này để buộc một công ty phải lùi lại, giống như Google gần đây đã làm với các nút biểu tượng Gmail. Nhưng nếu có thứ gì đó bạn có thật không ghét và công ty không thay đổi nó trở lại? Bạn có bị mắc kẹt với nó mãi mãi không? Nhờ phong cách người dùng, bạn có thể tự khắc phục những sự cố như vậy.



Giới thiệu phong cách

Stylish là một tiện ích bổ sung miễn phí có sẵn cho cả Firefox và Trình duyệt Chrome và nó cho phép bạn làm điều gì đó khá kỳ diệu - áp dụng phong cách của riêng bạn cho các phần tử của trang web. Ngay cả khi bạn không phải là một nhà phát triển web và bạn chưa bao giờ viết một chút CSS nào trong đời, thì điều này vẫn dễ dàng hơn nhiều. Bạn có thể sử dụng Stylish để chuyển đổi các trang web hoàn toàn (như tôi sẽ chỉ cho bạn trong phần tiếp theo), nhưng quan trọng hơn, bạn có thể sử dụng Stylish để khắc phục những phiền toái nhỏ trong vài phút.





Ví dụ: tôi gặp sự cố với kích thước phông chữ mặc định trong Gmail. Giao diện ổn - Tôi không muốn phóng to (Ctrl +) bằng trình duyệt của mình, vì điều đó sẽ làm tăng kích thước của tất cả các thành phần giao diện và thực sự xấu xí. Tôi chỉ muốn một cách để làm cho phông chữ tin nhắn lớn hơn một chút.

Với Stylish, điều đó thực sự đơn giản và tôi sẽ hướng dẫn bạn cách thực hiện. Nhưng trước khi chúng ta xem xét việc tạo phong cách người dùng của riêng bạn, hãy nói về việc tận dụng công việc của người khác.



UserStyles.org

Nếu có điều gì đó làm bạn lo lắng, thì bạn hoàn toàn có thể không đơn độc. UserStyles.org là một trang web cho phép người dùng chia sẻ phong cách mà họ đã tạo. Ở trên, bạn có thể thấy một phong cách ( Thêm nhãn vào các biểu tượng trên thanh công cụ ) do nhà bình luận của MakeUseOf RandyN đề xuất để trả lời câu chuyện của chúng tôi về các nút biểu tượng Gmail. Kiểu này cho phép bạn giữ lại các biểu tượng nhưng thêm vào các nhãn văn bản - điều mà Google sẽ không cho phép bạn làm.

UserStyles.org rất tuyệt, nhưng nó không hoàn hảo. Một số thiết kế cố gắng làm quá nhiều (thay đổi hoàn toàn giao diện của trang web) và một số dành cho các phiên bản cũ của trang web và hiện đã bị hỏng. Nếu bạn đang cố gắng khắc phục một điều gì đó nhỏ và không thể tìm thấy nó trên UserStyles.org, có lẽ cách hành động tốt nhất của bạn là tự mình thực hiện.



Tạo phong cách người dùng đơn giản của riêng bạn

Để tạo phong cách người dùng của riêng bạn, trước tiên bạn cần biết yếu tố nào của trang mà bạn đang cố gắng thay đổi và sau đó bạn muốn thực hiện thay đổi nào. Vì vậy, để bắt đầu, hãy nhấp chuột phải vào bất kỳ thứ gì bạn muốn thay đổi và chọn Kiểm tra nguyên tố . Bạn sẽ thấy một cái gì đó như thế này:

Firefox làm tối phần còn lại của trang và vẽ một khung rất rõ ràng xung quanh phần tử bạn đã chọn. Phía trên phần tử đó, văn bản cho biết div # 2d6.ii.gt.adP.adO , là một loạt các lớp CSS, cùng với một ID (phần bắt đầu bằng #). Đây là bộ chọn ảnh hưởng đến kiểu dáng cho phần tử này. Dọc theo cuối màn hình có một thanh điều hướng cho phép bạn ' đi qua cây DOM ', hay nói cách đơn giản hơn, đi lên và xuống theo thứ bậc của các phần tử dẫn đến phần tử bạn đã chọn.



Tên của trò chơi ở đây là chọn yếu tố bạn muốn tạo kiểu và làm cho lựa chọn không quá hẹp để nó không ảnh hưởng đến mọi thứ bạn muốn ảnh hưởng, cũng không quá rộng đến mức làm rối tung những thứ khác.

Tôi đã nhấp vào một phần tử cao hơn, div.gs , chỉ vì tôi thích tên của nó (có vẻ như thứ gì đó sẽ không thay đổi quá sớm, nhưng tôi hoàn toàn đoán được). Nó ảnh hưởng đến toàn bộ khu vực tin nhắn. Khi khu vực bạn muốn tạo kiểu được chọn, hãy nhấp vào Phong cách ở góc dưới bên phải, để mở Quy tắc bánh mỳ:

Tôi biết, ban đầu điều đó thật đáng sợ. Nhưng đây là nơi bạn thấy các quy tắc CSS khác nhau ảnh hưởng đến phần tử bạn đã chọn và đây là nơi bạn có thể thực hiện các sửa đổi tạm thời của riêng mình và xem tác động của chúng trên trang trong thời gian thực mà không cần tải lại. Nhưng bạn nên thay đổi điều gì? Nhấn vào Tính chất nút và bỏ chọn Chỉ phong cách người dùng :

Tại đây, bạn có thể xem danh sách đầy đủ tất cả các Quy tắc CSS. Bạn có thể cuộn xuống danh sách cho đến khi bạn tìm thấy quy tắc phù hợp với những gì bạn cần (cỡ chữ trong trường hợp của chúng tôi), và thậm chí nhấp vào dấu chấm hỏi bên cạnh nó để mở trang giải thích. Vì vậy, bây giờ chúng tôi biết chúng tôi muốn điều chỉnh thuộc tính font-size cho tất cả các phần tử div có lớp ' gs '(viết tắt là div.gs ).

Câu hỏi duy nhất còn lại là chúng ta muốn giá trị của nó là gì. Đối với điều đó, chúng tôi quay lại ngăn Quy tắc và bắt đầu chơi xung quanh:

40 pixel có thể hơi điên rồ, nhưng bạn sẽ hiểu được ý tưởng chung. Hãy thử với cái này và thoải mái thêm bất kỳ thuộc tính nào khác, cho đến khi bạn có được giao diện như mong muốn. Đảm bảo không đóng trang, vì các thay đổi của bạn không phải được lưu ở bất cứ đâu.

Lưu phong cách mới của bạn

Khi bạn đã có phần này của trang web trông giống như bạn muốn, đã đến lúc lưu nó. Nhấn vào Sành điệu trên thanh tiện ích bổ sung và chọn Viết kiểu mới . Sau đó, Stylish muốn biết trang nào sẽ áp dụng phong cách mới - trong trường hợp của chúng tôi, hãy chọn tùy chọn thứ hai, mail.google.com . Tiếp theo, bạn sẽ thấy hộp thoại này:

Tôi đã điền nó vào. Rõ ràng, tôi đã chọn một cái tên và một số thẻ cho phong cách. Nhưng điều thực sự xảy ra trong mã: Dòng 3 đã ở đó - Stylish đặt nó vào vị trí để nó biết phong cách áp dụng trên những trang nào. Nhưng dòng 5-7 là của tôi. Hãy phân tích chúng:

Dòng 5: div.gs { - phần này bạn nên nhận ra. Đây là yếu tố chúng tôi đã quyết định tạo kiểu. Dấu ngoặc nhọn mở đầu có nghĩa là bây giờ chúng ta sẽ viết một số quy tắc CSS. Dòng 6: font-size: 20px! important; - đó là quy tắc mà chúng tôi muốn thay đổi (kích thước phông chữ), tiếp theo là định nghĩa mới của nó (20 pixel), và sau đó là khai báo! Important, có nghĩa là Firefox sẽ tuân theo quy tắc này ngay cả khi một phần tử gần văn bản hơn cố gắng thiết lập kích thước phông chữ thành một cái gì đó khác. Dòng 7:} - đóng định nghĩa kiểu.

Tiếp theo, nhấp vào Xem trước và ngạc nhiên trước tác phẩm của bạn:

Và cuối cùng, khi bạn thấy nó đang hoạt động, hãy nhấp vào Cứu.

Đây không phải là một hướng dẫn đầy đủ

Tôi nhận thức rõ rằng để giữ cho hướng dẫn ngắn này trong giới hạn của một bài đăng, tôi đã phải thực hiện một số bước nhảy vọt. Nếu bạn đã bối rối trên đường đi, xin vui lòng chấp nhận lời xin lỗi của tôi. Ban đầu CSS khá phức tạp, nhưng nó không quá phức tạp khi bạn đã hiểu rõ về nó - và tùy chỉnh các trang web cục bộ vẫn là một trong những cách tốt nhất để học.

Nếu bạn bối rối vì bất cứ điều gì, vui lòng hỏi tôi bên dưới và tôi sẽ cố gắng hết sức để giúp đỡ.

cách chạy trò chơi windows 98 trên windows 10
Đăng lại Đăng lại tiếng riu ríu E-mail 5 mẹo để nạp đầy năng lượng cho máy VirtualBox Linux của bạn

Bạn mệt mỏi với hiệu suất kém do các máy ảo cung cấp? Đây là những gì bạn nên làm để tăng hiệu suất VirtualBox của mình.

Đọc tiếp Chủ đề liên quan
  • Các trình duyệt
  • Phát triển web
  • Công cụ quản trị trang web
  • Mozilla Firefox
  • Google Chrome
  • Thiết kế web
Giới thiệu về tác giả Erez Zukerman(288 bài báo đã xuất bản) Xem thêm từ Erez Zukerman

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký