Bố cục đa trình duyệt trong điều kiện hiện đại - hiểu biết chung về nguyên tắc cần thiết. Thủ thuật đa trình duyệt đơn giản nhưng hiệu quả mà ai cũng nên biết
Ngày nay, có một số trình duyệt phổ biến nhất được mọi người sử dụng để lướt Internet. Và điều đau đầu thường trực của bất kỳ nhà thiết kế web nào là cùng một mã HTML trông khác nhau trong các trình duyệt khác nhau. Hơn nữa, cùng một mã trông có vẻ khác nhau ở phiên bản khác nhau cùng một trình duyệt.
Đương nhiên, bất kỳ quản trị viên web nào cũng phải đảm bảo rằng trang web trông giống nhau về mặt hình thức. số lượng lớn nhất trình duyệt. Đó là kỹ năng này (khi mã trông giống nhau trong các trình duyệt khác nhau) và được gọi là "trình duyệt chéo Bố cục HTML"Khả năng gõ mã như vậy rất hữu ích và được các nhà tuyển dụng tiềm năng đánh giá cao. Thông thường, yêu cầu này là một trong những yêu cầu đầu tiên trong điều kiện mà một ứng viên tiềm năng cho vị trí lập trình viên web trong một công ty nghiêm túc phải đáp ứng.
Tại sao trang web trông khác nhau trong các trình duyệt khác nhau?
Có một số lý do cho sự xuất hiện nhiều loại khác nhau trang web trên nhiều trình duyệt khác nhau.
1. Sử dụng các tính năng HTML không chuẩn.
Người thiết kế có thể sử dụng các tính năng không có trong tiêu chuẩn HTML. Thật vậy, các trình duyệt có thể hỗ trợ nhiều thuộc tính thẻ khác nhau không được mô tả trong tiêu chuẩn. Không nên sử dụng các tính năng này. Vì một lý do đơn giản - nếu có điều gì đó không được mô tả trong tiêu chuẩn thì bất kỳ trình duyệt nào cũng có thể không hỗ trợ điều đó. Và những người tạo ra một trình duyệt như vậy sẽ hoàn toàn đúng. Không cần sử dụng các tính năng không chuẩn.
Luôn kiểm tra mã bạn viết để đảm bảo nó tuân thủ tiêu chuẩn.
Hãy để tôi cho bạn một ví dụ cổ điển. Hãy xem xét đoạn mã HTML sau bảng đơn giản nhất.
Chào thế giới |
Mã này hiển thị một bảng bao gồm một ô. Người thiết kế web muốn chiều cao của hàng đầu tiên của bảng này là 100 pixel. Tuy nhiên, trong tiêu chuẩn HTML thẻ
TRONG trong trường hợp này, lỗi không lớn vì thuộc tính chiều cao của thẻ
Giải pháp đúngđối với ví dụ về bảng, đây là cách sử dụng các kiểu. Mã "chính xác" có thể trông như thế này:
Chào thế giới |
Tùy chọn này sẽ (hoặc ít nhất nên) hiển thị giống nhau trong tất cả các loại trình duyệt.
2. Giá trị thuộc tính mặc định.
Mỗi phần tử HTML có nhiều thuộc tính. Điều này bao gồm màu sắc, khoảng cách đến các phần tử liền kề, căn chỉnh và nhiều hơn nữa. Khi bố trí mã HTML, nhà thiết kế thường chỉ đặt giá trị của những thuộc tính quan trọng cho việc trình bày các thành phần trên trang. Trình duyệt nên làm gì với các giá trị của thuộc tính không xác định? Trong trường hợp này, trình duyệt sử dụng các giá trị mặc định. Và đây là nơi nguy hiểm nằm. Giá trị mặc định có thể khác nhau giữa các trình duyệt. Ví dụ: kích thước phông chữ mặc định có thể thay đổi. Vì điều này, văn bản sẽ chiếm nhiều không gian hơn ở một số trình duyệt so với những trình duyệt khác. Do đó, điều này có thể dẫn đến sự khác biệt trong cách hiển thị trang.
Làm thế nào tôi có thể giải quyết vấn đề này? Trước hết, lời khuyên phổ quát: kiểm tra khả năng hiển thị của trang web trên càng nhiều trình duyệt càng tốt. Thứ hai, bạn có thể đặt giá trị mặc định của mình trong tệp css cho tất cả các thành phần được sử dụng trên trang. Điều này sẽ giúp trình duyệt không phải tính toán các giá trị thuộc tính. phần tử HTML. Bạn có thể làm điều này, ví dụ như thế này:
html, nội dung, div, span, applet, đối tượng, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, từ viết tắt, địa chỉ, lớn, trích dẫn, mã,
del, dfn, em, phông chữ, img, ins, kbd, q, s, samp,
nhỏ, tấn công, mạnh mẽ, phụ, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, biểu mẫu, nhãn, chú giải,
bảng, chú thích, tbody, tfoot, thead, tr, th, td (
lề: 0;
phần đệm: 0;
đường viền: 0;
phác thảo: 0;
độ dày phông chữ: kế thừa;
kiểu phông chữ: kế thừa;
cỡ chữ: 14px;
họ phông chữ: kế thừa;
căn dọc: trên cùng;
nền: trong suốt;
phông chữ: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
màu nền: trắng;
}
Như vậy, tất cả các phần tử trên trang sẽ có các thuộc tính được chỉ định trong tập tin này. Nếu một phần tử cần có các thuộc tính khác với các thuộc tính mặc định thì chúng phải được ghi đè một cách rõ ràng.
3. "Tính năng" của một số trình duyệt.
Tuy nhiên, ngay cả khi quản trị trang web chỉ sử dụng tính năng tiêu chuẩn HTML đã đặt thuộc tính mặc định cho tất cả các thành phần, trang web có thể vẫn trông khác nhau trong các trình duyệt khác nhau. Điều này là do bản thân các trình duyệt có thể không tuân thủ tiêu chuẩn HTML. Trình duyệt, giống như bất kỳ phần mềm, có thể chứa lỗi. Những lỗi này thường được sửa chữa nhanh chóng nhưng luôn có khả năng người dùng chưa cài đặt phần mềm tốt nhất. phiên bản mới nhất browser.
Cũng có thể các nhà sản xuất trình duyệt (MicroSoft đặc biệt mắc phải lỗi này) tin rằng họ biết rõ hơn cách hiển thị phần tử này hoặc phần tử kia.
Vì thủ phạm chính gây ra vấn đề không tương thích với tiêu chuẩn là trình duyệt web IE, thì nhiều cách giải quyết khả thi đã được phát minh để làm cho trang web trông giống nhau trong IE cũng như trong các trình duyệt khác.
Cách phổ biến nhất là bình luận có điều kiện cho IE. Microsoft, như thể nhận thức được vấn đề của trình duyệt của mình, đã cung cấp cho các nhà phát triển một cách chỉ thực thi mã HTML trên phiên bản đặc biệt I E. Ví dụ: đoạn mã sau sẽ kích hoạt một đặc biệt tập tin CSS dành cho trình duyệt IE phiên bản 7 trở lên: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Bình luận có điều kiện có một nhược điểm duy nhất. Một trang bao gồm những bình luận như vậy là không hợp lệ. trang HTML. Như bạn có thể thấy, Microsoft cũng vi phạm tiêu chuẩn ở đây.
Nếu bạn thu thập một loạt các trình duyệt hiện đại, bạn có thể sắp xếp nó theo nhiều cách khác nhau: theo thiết bị, theo nền tảng, theo loại công việc và thậm chí theo màu biểu tượng. Điều hữu ích nhất đối với nhà phát triển là có thể sắp xếp chúng thành các công cụ. Chính công cụ, tức là cốt lõi của trình duyệt, sẽ quyết định cách nó hoạt động với bố cục của bạn.
Một số trình duyệt chỉ hoạt động trên một nền tảng: Edge và IE chỉ có trên Windows, Safari chỉ có trên macOS và iOS. Đã từng có nỗ lực can thiệp nhưng không có kết quả. Điều này tất nhiên làm phức tạp việc kiểm tra. May mắn thay, có những dịch vụ như BrowserStack cho phép bạn truy cập vào mọi thứ trình duyệt hiện có và Microsoft đang phát hành các phiên bản Windows nhỏ gọn để thử nghiệm Edge và IE trên các máy ảo.
ĐƯỢC RỒI! Bây giờ chúng ta biết về trình duyệt. Phải làm gì nếu cùng một trình duyệt, cùng một công cụ - và kết quả giống nhau nền tảng khác nhau khác biệt? Nhưng không thể làm gì được! Trên thực tế, các trình duyệt có thể khác nhau rất nhiều tùy thuộc vào nền tảng hoặc thiết bị. nhất một sự khác biệt lớn giữa máy tính để bàn và trình duyệt di động- cái sau có rất nhiều tối ưu hóa và chỉ là phép thuật. Nhưng bạn cũng có thể nắm bắt được các hành vi khác nhau trên máy tính để bàn Windows và macOS.
Tôi nghĩ bạn đã hiểu những gì tôi đang hướng tới. Khả năng tương thích giữa nhiều trình duyệt là con kỳ lân cầu vồng mà mọi người đều theo đuổi nhưng không ai có thể bắt được. Tất nhiên, mục tiêu của việc theo đuổi là cao cả: làm cho các trang web trông và hoạt động tốt như nhau trên tất cả các trình duyệt và tất cả các nền tảng. Và nếu chúng ta vẫn có thể đảm bảo ít nhiều về kích thước thụt lề, phông chữ, chiều cao dòng, màu sắc thì làm mịn văn bản, làm mờ bóng, hiển thị đồ họa và vẻ bề ngoài Tốt hơn hết là đừng cố gắng đưa các điều khiển hệ thống về dạng chung.
Vì vậy, nếu đối với bạn, pixel hoàn hảo có nghĩa là đi vào lưới và kích thước ngang của các khối thì bạn vẫn có cơ hội. Nhưng nếu bạn điều chỉnh độ mịn của văn bản, số dòng trong một đoạn văn hoặc kích thước dọc các khối có nội dung theo đúng bố cục, bạn đang lãng phí thời gian. Lý tưởng nhất là một trang web đa trình duyệt sẽ trông xa lạ như nhau trên tất cả các nền tảng - xét cho cùng, mỗi trang đều có những tính năng riêng quen thuộc với người dùng.
Và nhiều hơn nữa về thử nghiệm. Cho dù trình giả lập Chrome DevTools có bắt chước các thiết bị và trình duyệt tốt đến đâu thì đây chỉ là gợi ý về hình thức của chúng trong thực tế. Điều quan trọng là phải kiểm tra kết quả trên các nền tảng và thiết bị thực, tối thiểu là: Windows, Android, macOS và iOS. Ngón tay thật trên thiết bị thật, trình duyệt thực trong môi trường sống tự nhiên của chúng sẽ cho bạn biết rất nhiều điều về cách sử dụng giao diện của bạn. Đây là nhiều quan trọng hơn thế chúng giống nhau như thế nào với bố cục.
Đăng ký nhận tin tức về trình duyệt trên Twitter, tự đặt Chrome Canary, Firefox hàng đêm, Bản xem trước công nghệ Safari. Hãy bật cờ, dùng thử, cập nhật thông tin và quan trọng nhất là ngừng chạy theo pixel và bắt đầu tạo giao diện đẹp. Các trang web không nên trông giống nhau trong tất cả các trình duyệt.
Phiên bản video
Bố cục đa trình duyệt- đây là bố cục của trang web có khả năng hiển thị giống nhau trong các trình duyệt khác nhau. Thành thật mà nói, nhiệm vụ này không hề dễ dàng, vì mỗi trình duyệt đều có những đặc điểm và nhược điểm riêng. Vì vậy, trình duyệt dành cho nhà thiết kế web cũng giống như Kryptonite dành cho Siêu nhân. Cuộc sống của các nhà thiết kế web trên khắp thế giới sẽ tốt hơn nhiều nếu các trình duyệt hiển thị những thiết kế đẹp mắt mà không có lỗi hay cạm bẫy. Nhưng thật không may, điều này sẽ không bao giờ xảy ra. Đây là lúc chúng ta phải suy nghĩ lại cách chúng ta sử dụng trình duyệt. Khi tạo bố cục trên nhiều trình duyệt, chúng tôi cần tính đến tất cả các tính năng của từng trình duyệt, vì người dùng đăng nhập từ trình duyệt mà họ đã quen và chúng tôi không thể buộc họ chuyển sang phần mềm khác mà phải thích ứng với nó.
In ấn và bố trí web
Bố cục web hiện đại rất khác biệt và có một số nhược điểm so với thiết kế in ấn, nơi thực tiễn thế giới đã được tạo ra trong nhiều thế kỷ. Mặc dù thiết kế in không thể định vị được do tính chất cố định của nó, nhưng việc in ấn có lợi thế ở các lĩnh vực khác như màu sắc và độ tương phản do chất lượng giấy hoặc bản in.
Trình duyệt là kẻ gây rối nổi tiếng nhất thiết kế tốt, giống như các bản cài đặt in ấn ngày xưa hoặc chất lượng kém giấy đã phá hủy thiết kế in ấn. Nhưng không giống như ngành in ấn toàn cầu, web không thể dựa vào kinh nghiệm toàn cầu và các phương pháp đã được chứng minh để xử lý những khác biệt. Một lần nữa tính năng độc đáo Công việc của người thiết kế bố cục là anh ta không thể lấy kết quả để kiểm soát chất lượng in ấn như khi in ấn. Chúng tôi không biết người dùng sẽ chọn trình duyệt nào hoặc họ sẽ sử dụng màn hình nào. Vì vậy, dù bố cục đa trình duyệt như thế nào thì vẫn sẽ có sự khác biệt trên màn hình của người dùng. Nhưng nhiệm vụ của chúng ta là giảm thiểu sự khác biệt về thiết kế khi hiển thị nó trên cửa sổ trình duyệt của người dùng.
Các trình duyệt khác nhau dành cho những người khác nhau
Các trình duyệt và các công ty, giống như bất kỳ công ty nào khác trên thế giới, đều có sự cạnh tranh với nhau. Nhưng nếu có một số loại tổ chức tiêu chuẩn web, thì việc tạo ra các trình duyệt khác nhau sẽ chẳng ích gì và sự cạnh tranh giữa chúng sẽ không còn nữa. Chỉ có một trình duyệt tuyệt vời duy nhất, tôi nghĩ chúng ta sẽ gọi nó là WebKit. Nhưng vì các trình duyệt cạnh tranh để giành người dùng nên sự khác biệt trong các trình duyệt sẽ thu hút công chúng.
Trong thế giới in ấn (printing), các công ty cạnh tranh với nhau bằng cách bổ sung thêm các tính năng mới và các profile màu sắc khác nhau. Ngoài ra, các kỹ sư của họ còn tính đến đặc điểm đối tượng người dùng sản phẩm của họ. Ví dụ, máy in Canon được sử dụng nhiều hơn cho việc in ấn thương mại. Máy in Ricoh không có gam màu đậm như các đời trước nên được sử dụng để in các tài liệu nội bộ trong công ty (báo cáo, nghị định thư, đạo luật...). Tôi nghĩ sự tương tự là rõ ràng đối với các nhà phát triển thiết kế đa trình duyệt. Nếu bạn là nhà thiết kế in quảng cáo cho các công ty thương mại lớn thì rất có thể bạn sẽ chọn máy in có chất lượng tuyệt vời in và rộng bảng màu, không phải tầng lớp doanh nghiệp hay cá nhân.
Trình duyệt tương tự như máy in. Một số được xây dựng để xử lý các công trình nặng, một số khác được xây dựng nhiều hơn cho công việc giấy tờ. IE được xây dựng nhiều hơn cho đối tượng kỹ thuật hoặc doanh nghiệp, như Chrome, Firefox, để phục vụ đối tượng sáng tạo hơn.
Khi sự phát triển của web trong thập kỷ tới sẽ dẫn đến những khác biệt lớn hơn và hơn các trình duyệt với những đặc điểm riêng của chúng, chúng ta nên suy nghĩ và tìm cách tạo ra nhiều thiết kế đa trình duyệt hơn để giải quyết vấn đề tương thích giữa các trình duyệt và bố cục của chúng ta.
Đã qua lâu rồi cái thời mọi thứ trông giống nhau trên các trình duyệt, vì vậy bạn phải tìm cách giải quyết cho bố cục trên nhiều trình duyệt hoặc tạo một thiết kế đơn giản, nhàm chán hơn. Những trình duyệt mới này sẽ buộc chúng tôi phải suy nghĩ lại về cách thiết kế nhiều trình duyệt.
Chất lượng đa trình duyệt
Chất lượng là một khái niệm linh hoạt. Bởi vì dự án đơn giản, sẽ dễ thực hiện hơn nhiều so với một kiệt tác thiết kế nào đó. Do đó, khi làm việc với khách hàng, bạn cần tính đến mức độ phức tạp của dự án liên quan đến bố cục đa trình duyệt của nó. Vì hầu như không thể tạo ra một thiết kế thực sự thú vị, đa trình duyệt, sáng tạo, năng động, do đó, khi làm việc với khách hàng, bạn cần chỉ ra những khuyết điểm, hay chính xác hơn là sự khác biệt trong kết quả đầu ra của một số yếu tố thiết kế trong các trình duyệt khác nhau. Bạn cần cho họ thấy chất lượng bố cục trong các trình duyệt chính (phổ biến) và các trình duyệt phụ, sau đó cho họ cơ hội lựa chọn. Nếu bạn biết rõ sự khác biệt giữa các trình duyệt đến mức bạn có thể chỉ ra chúng trong dự án khi tạo bố cục trong Photoshop, thì đây chỉ là một điểm cộng cho công việc của bạn với khách hàng.
Với kinh nghiệm, khi đánh giá chất lượng bố cục trên nhiều trình duyệt, bạn có thể tạo một mẫu hoặc bảng chung thể hiện sự khác biệt giữa một số trình duyệt và sử dụng mẫu này để làm việc với khách hàng.
Một số mẹo về bố cục trên nhiều trình duyệt:
Hãy rút ra kết luận:
Trong tương lai, những điều bất ngờ mới đang chờ đợi chúng ta với bố cục đa trình duyệt. Hãy chuẩn bị cho chúng và tìm kiếm các giải pháp thay thế mới (cách giải quyết). Có lẽ tốc độ Internet cao, PC mạnh mẽ và các công nghệ web mới như Flash và các công nghệ khác sẽ giúp chúng ta điều này.
- Bạn có biết khán giả không? Có thể khán giả của bạn không yêu cầu chuông và còi mới hoặc khả năng trình duyệt mới.
- Hỗ trợ thương hiệu của bạn bằng sự nhất quán về màu sắc, logo và phong cách. Đừng giết chết thương hiệu bằng những ý tưởng thiết kế mới. Thương hiệu là chất lượng và truyền thống.
- Đảm bảo trình duyệt không can thiệp vào mục đích trang web của bạn. Nội dung của trang và ý nghĩa tổng thể của trang web nên được tách biệt.
- Tương tự như lời khuyên ở trên, nội dung (nội dung trang) nên được tách biệt khỏi thiết kế và kiểu dáng. Theo một nghĩa nào đó, nội dung phải được hiển thị rõ ràng và không hợp nhất thành một bức tranh tổng thể hoặc một số khối và biểu tượng.
- Nếu bạn đang thiết kế trang web cá nhân của mình thì hãy liên tục kiểm tra khả năng tương thích giữa nhiều trình duyệt của thiết kế của nó trong các phiên bản trình duyệt mới để không làm mất người dùng.
Trong số tất cả sự đa dạng hiện có trên khoảnh khắc này trình duyệt như Opera, Safari, Internet Explorer, Google Chrome, Mozila firefox và tất nhiên là trình duyệt Amigo, có khả năng cài đặt tự động trên máy tính, chỉ cần nhìn vào liên kết. Và bất kỳ trình duyệt nào cũng có một số lượng lớn phiên bản lần lượt ra mắt. Vì thế mỗi Một phiên bản mới Mỗi trình duyệt đều có những đặc điểm riêng. Va cho hoạt động chính xác trang web trong mỗi trong số họ phải được sử dụng bố cục đa trình duyệt.
Và khi một trang web được tạo ra, nó phải được kiểm tra trên tất cả các trình duyệt. Nếu điều này không được thực hiện, thì sau khi trang web được bàn giao, những khiếm khuyết khó chịu có thể xuất hiện.
Tất nhiên, điều thú vị nhất của các trình duyệt là trình duyệt Internet Explorer, mặc dù bất chấp tất cả những điều này, hầu hết người dùng vẫn sử dụng trình duyệt này. Vì vậy, nếu trang web trước đó đã được kiểm tra trên Chrome và sau đó nó được mở trong Explorer, và ồ, thật kinh dị. Các khối bị xáo trộn, các nút menu va chạm với nhau, hình ảnh hiển thị không chính xác, nói chung là hoàn toàn hỗn loạn.
Do đó, để người dùng có thể làm việc thuận tiện với trang web của bạn thông qua bất kỳ trình duyệt nào và không thấy sự kinh dị như vậy, bố cục trên nhiều trình duyệt là bắt buộc đối với bất kỳ trang web nào. Dựa trên tất cả những gì đã được viết ở trên, chúng tôi kết luận rằng trình duyệt chéo html và bố cục css – đây là cách bố trí trang web nhằm mục đích tạo một trang web được hiển thị chính xác như nhau trên mọi trình duyệt.
Xem xét sự đa dạng của các trình duyệt, cũng như nhu cầu về tính phổ quát của trang web và có thể được hiển thị chính xác trong tất cả các trình duyệt, nhà tuyển dụng đặt ra yêu cầu đối với các nhà thiết kế bố cục phải bắt buộc sắp chữ trên nhiều trình duyệt. Việc hiểu lý do khiến một trang web hiển thị không chính xác cũng như kỹ năng bố cục trên nhiều trình duyệt sẽ cần có thời gian và thông qua quá trình luyện tập lâu dài. Chỉ bằng cách thử và sai, một người mới có thể tìm ra trình duyệt nào có vấn đề. Với kinh nghiệm, người thiết kế bố cục sẽ cố gắng soạn mã sao cho nó được điều chỉnh theo mọi cách có thể cho từng trình duyệt và trong quá trình bố cục, tất cả những gì còn lại là sửa những lỗi nhỏ.
Nguyên nhân gây ra vấn đề về hiển thị trang web.
Bây giờ chúng ta hãy xem tại sao những rắc rối như vậy lại xảy ra khi nhận thức về mã trong các trình duyệt khác nhau.- Bố cục không khớp một số tiêu chuẩn HTML.
- /i>Thư viện mới được cập nhật liên tục và xuất hiện Quy tắc CSS. Chúng sinh sản hoàn hảo phiên bản cập nhật trình duyệt, nhưng có thể không hiển thị chính xác trong các phiên bản cũ hơn.
- trình duyệt web IE. Trình duyệt kỳ lạ nhất không hiểu một nửa tất cả các quy tắc và do đó các bản hack mới liên tục được phát minh để giải quyết các vấn đề này của IE.
- Giá trị thuộc tính mặc định. Giá trị này có thể khác nhau ở mỗi trình duyệt. Thuộc tính là màu sắc của các phần tử, phông chữ và kích thước của chúng. Tất cả điều này phải được mô tả trong biểu định kiểu, nếu không trình duyệt sẽ nhập độc lập các giá trị được chỉ định trong tất cả chúng theo mặc định. Do đó, ở mỗi trang web sẽ được hiển thị khác nhau.
Mẹo 1. Giải quyết vấn đề thuộc tính khá đơn giản, mặc dù có thể hơi tẻ nhạt. Để làm điều này, bạn chỉ cần chỉ định tất cả từng thuộc tính trong biểu định kiểu. Bằng cách này, trình duyệt không phải chèn giá trị theo ý muốn.
Mẹo 2. Cài đặt mọi thứ trình duyệt phổ biến vào máy tính làm việc của bạn, cũng như tất cả các phiên bản Trình duyệt Internet Nhà thám hiểm. Vì không dễ để cài đặt nhiều phiên bản trên một máy tính mà không sử dụng tambourine nhiều, bạn có thể cài đặt Internet Explorer Explorer. Chương trình này cho phép kiểm tra một trang web trên nhiều phiên bản trình duyệt cùng một lúc.
Mẹo 3. Chọn tùy chọn bố trí của bạn trước. Có hai lựa chọn ở đây. Đầu tiên là thiết kế một trang web hoàn toàn phù hợp với một trình duyệt duy nhất, sau đó khắc phục sự cố ở từng trình duyệt tiếp theo. Tùy chọn thứ hai là kiểm tra từng thành phần của mã vì nó được viết trong tất cả các trình duyệt. Bằng cách chọn tùy chọn đầu tiên, bạn có thể tránh được những vấn đề không cần thiết, viết lại mã hoàn toàn. Nhưng sự lựa chọn luôn là của bạn.
Mẹo 4. Sử dụng plugin để tìm nhanh lỗi code cho từng trình duyệt. Ví dụ: bạn có thể kiểm tra các plugin này:
- Dành cho Chrome tại getfireorms.com
- Dành cho Opera trên trang web chính thức của Opera
- Dành cho Mozila trên trang web addons mozila
- Đối với IE tại văn phòng. Trang web của Microsoft
Hãy rút ra kết luận từ tất cả những điều trên. Bố cục đa trình duyệt– nó không đáng sợ, và đôi khi nó rất vui. TRONG thế giới hiện đạiđiều rất quan trọng để trở thành một nhà thiết kế bố cục thành công. Cái chính để làm chủ được cách bố trí này là kinh nghiệm, rất nhiều kinh nghiệm. Vì vậy, bạn sẽ phải luyện tập rất nhiều. Trong khi bạn đang tập luyện, hãy sử dụng các chiến lược khác nhau, thử phương pháp khác nhau và các công cụ (ví dụ: sử dụng các khung làm sẵn trong công việc của bạn để có thể tăng tốc độ phát triển trang web và dễ dàng tạo bố cục trang web thích ứng). Sau một thời gian, bạn sẽ có thể tìm thấy chính xác chiến lược của mình về cách tạo bố cục trên nhiều trình duyệt và viết một trang web hiển thị chính xác trong từng trình duyệt phổ biến.
Tìm hiểu cách bố trí trên nhiều trình duyệt và cảm ơn bạn đã quan tâm.
Khi một trang web được tạo, bố cục trên nhiều trình duyệt rất quan trọng để đảm bảo tính hiệu quả của nó. Nó là gì? Nó được hoàn thiện bằng cách nào? Cái mà đá dưới nước hiện hữu?
Bố cục đa trình duyệt là gì?
Html/css là nền tảng để tạo một trang web. Nhiều quản trị viên web tiếp cận vấn đề này theo nguyên tắc: Tôi giỏi và thế là đủ. Và thật khó chịu khi bạn đăng nhập từ trình duyệt hoặc thiết bị di động và trang web được hiển thị không chính xác. Trong những trường hợp như vậy, thiết kế đáp ứng và bố cục đa trình duyệt sẽ giúp ích.
Trong trường hợp này, Css và html tạo thành xương sống để mọi thứ được triển khai. Trong một số trường hợp, JavaScript có thể được sử dụng cho mục đích này. Nhưng mục tiêu cuối cùng là như nhau - làm cho mọi thứ hoạt động trên các phiên bản khác nhau. Do đó, nếu bạn muốn đảm bảo khả năng tương thích giữa nhiều trình duyệt để trang web hiển thị tốt trên tất cả các trình duyệt, bạn phải suy nghĩ liên tục về điều này, ngay từ giây đầu tiên làm việc trên trang web.
Hướng dẫn từng bước nói chung
Vì vậy, hãy xem cách tạo bố cục trên nhiều trình duyệt. Ban đầu, bạn nên quyết định trang web sẽ hoạt động với chương trình nào. Xin lưu ý rằng số lượng trình duyệt đang lên tới con số hai trăm, vì vậy cố gắng làm hài lòng tất cả mọi người là một nhiệm vụ cực kỳ khó khăn. Do đó, hãy chọn một số trong khoảng từ 3 đến 8. Để quyết định tập trung vào điều gì, bạn có thể sử dụng các dịch vụ phụ trợ như Yandex Metrika và sau đó, bạn nên tìm hiểu xem vấn đề đạt được khả năng tương thích giữa nhiều trình duyệt sẽ được giải quyết như thế nào.
Nhiều người dựa vào kaki. Cái này mã đặc biệt, bộ chọn và quy tắc mà chỉ một trình duyệt cụ thể mới hiểu được. Tuy nhiên, do bạn phải viết ít nhất vài chục phần chèn như vậy cho các trình duyệt khác nhau và phiên bản của chúng, nhiều người từ chối phương pháp này vì chi phí cao, tốn thời gian và tính chất không hợp lý của nó. Một số dựa vào việc sử dụng các yếu tố được hiển thị giống nhau. Nhưng trong trường hợp này bộ truyện thường bị mất lợi thế quan trọng. Để giảm thiểu tổn thất, thiết kế thích ứng cũng được sử dụng song song. Anh ta là gì?
Thiết kế thích ứng
Đây là một cách tiếp cận bố cục trang web, trong đó trang web được tạo ra một cách linh hoạt, nghĩa là trang web thích ứng với các trình duyệt khác nhau và kích thước màn hình. Cần lưu ý rằng thiết kế đáp ứng và khả năng tương thích giữa nhiều trình duyệt có mối liên hệ chặt chẽ với nhau và khi nói về một thứ, chúng thường có nghĩa là thứ hai. Hãy xem xét một ví dụ nhỏ.
Có các trình duyệt như Opera và Opera Mini. Cái đầu tiên được sử dụng trên máy tính thông thường và thứ hai - trên điện thoại di động. Nhìn chung chúng giống nhau nhưng có toàn bộ dòngđặc trưng. Trong những trường hợp như vậy, điều quan trọng là phải bao gồm các tệp riêng lẻ và/hoặc sử dụng truy vấn phương tiện. Nó là gì? Trong trường hợp đầu tiên, hãy tạo tập tin riêng biệt, nhằm mục đích hoạt động của một trình duyệt cụ thể và lệnh gọi của chúng được quy định. Trong trường hợp thứ hai, cần có các tệp có truy vấn phương tiện. Nếu chương trình được sử dụng đáp ứng các yêu cầu cụ thể thì tệp sẽ được tải theo cấu hình được yêu cầu.
Chúng ta phải làm gì đây?
Ban đầu, bạn nên nhớ rằng khi làm việc với html, bố cục trên nhiều trình duyệt yêu cầu đặc biệt chú ý. Vì vậy, để có kết quả cao hơn, bạn nên sử dụng tối đa khả năng của các biểu định kiểu xếp tầng. Đồng thời, cũng cần thay đổi một số cách tiếp cận công việc. Vì vậy, nhiều người thiếu kinh nghiệm, khi chỉ ra kích thước của một thứ gì đó, hãy sử dụng pixel - px. Hãy xem một ví dụ với tiêu đề lớn tô điểm cho phần đầu của trang web.
Chiều rộng của nó được đặt thành 800px. Với màn hình 1600px sẽ khá hấp dẫn. Nhưng ở 700px nó sẽ trông thật lố bịch. Phải làm gì trong trường hợp này? Bạn có thể đặt kích thước không phải bằng pixel mà bằng tỷ lệ phần trăm! Và dòng chữ sẽ không chiếm một chiều dài cố định mà chiếm một nửa chiều rộng của màn hình. Bạn cũng có thể đặt khoảng cách từ đó màn hình sẽ được đặt đến các cạnh của màn hình theo tỷ lệ phần trăm. yếu tố cụ thể. Nhưng phải làm gì nếu màn hình quá nhỏ?
Giả sử nó là 300px? Trong trường hợp này, truy vấn phương tiện sẽ giúp chúng tôi bằng cách chỉ định chiều rộng cố định. Và nếu nó có kích thước 700px trở xuống thì chúng ta có thể xác định rằng dòng chữ sẽ chiếm 75% không gian. Và nếu chiều rộng là 300px trở xuống thì bạn có thể đặt thành 100%. Nhìn chung, chủ đề này rất thú vị và hữu ích nên có thể nghiên cứu rất chi tiết. Nhưng than ôi, ở đây có thông tin về cuốn sách và sẽ không thể đưa hết mọi thứ vào bài viết được.
Tại sao bố cục đáp ứng trên nhiều trình duyệt lại thu hút các công cụ tìm kiếm?
Và câu trả lời rất đơn giản: bởi vì điều này cho thấy rằng các nhà phát triển giám sát trang web và làm cho nó trở nên thú vị nhất có thể đối với người dùng của họ. Điều này có nghĩa là những người như vậy có thể được khuyến khích bằng cách trao cho họ vị trí cao hơn trong công cụ tìm kiếm. Tất nhiên, trang web của bạn sẽ không được đưa ngay lên TOP-1, nhưng kết hợp với các yếu tố khác, điều này sẽ giúp bạn tăng hạng đáng kể. Cần lưu ý rằng đây không phải là một yêu cầu đơn giản vô dụng mà là một điều đáng được quan tâm.
Sau cùng, hãy tự suy nghĩ: người dùng sẽ cảm thấy thế nào khi truy cập vào một trang web có giao diện không mấy dễ chịu? Nhưng anh ta có thể đi đến kết luận rằng hệ thống tìm kiếm cung cấp nội dung chất lượng thấp! Đó là lý do tại sao họ chọn các trang web họ cung cấp rất cẩn thận. Ngoài ra, đây là một lợi ích cho quản trị viên web vì họ tạo ra một lớp nội dung chất lượng cao trong đó mọi người có thể nhận được thông tin mà họ quan tâm bằng cách sử dụng bất kỳ nội dung nào. phần cứng: máy tính, máy tính xách tay, máy tính bảng, điện thoại thông minh hoặc điện thoại di động. Theo đó, khách truy cập càng hài lòng thì trang web và mức thu nhập càng tăng nhanh.
Phần kết luận
Không thể không lưu ý đến một thực tế khiêm tốn là việc tạo một trang web đa trình duyệt với thiết kế thích ứng- đây không phải là một công việc dễ dàng, rất lâu dài và tốn nhiều công sức. Vì vậy, bạn cần phải kiên nhẫn và nhớ rằng kỷ luật là một điều tuyệt vời! Có thể ban đầu điều gì đó sẽ không suôn sẻ, nhưng bạn cần phải cố gắng, tìm kiếm thông tin, sử dụng các cách tiếp cận khác nhau và không bỏ cuộc. Và khi đó bạn chắc chắn sẽ có thể tạo ra một trang web dễ dàng hiển thị cho khách truy cập.
