Опубликовано автор в категориях Верстальщику.

chrome

Перевод, авторский текст на сайте Webdesigner Depot

Когда вы разобрались с IE6, поставили все «грабли и костыли», вам стоит подумать и о новом браузере от Google.

Хорошая новость заключается в том, что Chrome куда более совместим с веб-стандартам, чем IE 5 и 6. Тем не менее, он имеет свои особенности и баги.

Никто не может сказать точно, какое будущее ждет этот браузер. Но на сегодняшний день, за довольно короткий период Chrome захватил определенный сегмент рынка веб-навигаторов.

В этой статье вы найдете несколько советов, для того, чтобы ваши веб-страниц, работающие в Chrome, функционировали и выглядели так, как это и было задумано.

Пользователи Mac

По состоянию на февраль 2009 года, Chrome является браузером только для Microsoft Windows. Если вы используете Mac, вам понадобится запускать Microsoft Windows на основе Bootcamp, или одного из продуктов виртуализации для Mac (Sun’s VirtualBox, Parallels, VMware Fusion). Если вы не боитесь экспериментировать, то можно попробовать запустить Chrome с использованием Darwine. Но есть и позитив: Google обещает выпустить версию для Mac в ближайшие месяцы.

Исчезающие Pop-Up окна

Блокировка всплывающих окон становится проблемой, если ваш сайт действительно нуждается в данном функционале. Если у вас есть веб-страницы, на которых необходимо использовать всплывающие окна, вы не увидите их в Chrome. По замыслу разработчиков, Chrome отображает только название всплывающего окна и минимизирует его в нижнем правом углу окна браузера. Пользователям необходимо нажать и перетащить заголовок всплывающего окна, чтобы просмотреть его содержимое.

SSL сломался?

По замыслу разработчиков, Chrome подтверждает лишь валидные SSL (Secure Sockets Layer) страницы в том случае, если все элементы на странице передаются с помощью SSL. Иными словами, если Ваша страница передается через SSL, но она подключает элементы, не обеспеченные безопасным HTTP, Chrome присвоит вашей странице иконку с восклицательным знаком, указывающею, что по его мнению, ваша страница будет противоречить правилам SSL передачи. Чтобы решить эту проблему убедитесь, что все ресурсы, загружаемые вашей веб-страницей, включая все изображения, снабжены правильным url с префиксом HTTPS.

Предварительное заявление кодировки

Если текст на вашей странице в Chrome искажен, то вам, возможно, потребуется включить указание кодировки информации в <head> каждой веб-страницы. Если у вас уже есть указание кодировки, оно должно идти первым, до любых CSS и Javascript. В противном случае, Chrome будет просто игнорировать его.

Правильный пример:

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<script type=»text/javascript»>
… your JavaScript code …
</script>
… your CSS code …

Кроме того, Chrome будет игнорировать указание кодировки, указанной через Javascript. Например, следующая команда будет игнорироваться:

document.write(«<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>»);
Вместо того чтобы, использовать JavaScript, Вы должны вставить вашу кодировку в начале раздела <head> каждой веб-страницы, как показано выше.

Закладка в избранное

Когда пользователь хочет добавить ваш сайт в закладки, вы можете контролировать название закладки по умолчанию, описание, ссылку, и иконку закладки. Просто убедитесь, что в разделе <head> в ваших веб-страницах имеется нужный код.

Вот рабочий пример:

<head>
<meta name=»application-name» content=»Greatest Website»/>
<meta name=»description» content=»The very best on the web»/>
<meta name=»application-url» content=»http://www.superfantasticgreatestweb.com»/>
<link rel=»icon» href=»great-icon_32×32.png» sizes=»32×32″/>
<link rel=»icon» href=»great-icon_48×48.png» sizes=»48×48″/>
</head>

Отладка JavaScript

Если ваш JavaScript не работает должным образом в Chrome, его можно проверить в консоле JavaScript, которая доступна из меню управления текущей страницей Значок меню текущей страницы -> Разработчикам -> консоль JavaScript. Или можно использовать сочетание клавиш Ctrl+Shift+j.

Более продвинутые разработчики JavaScript, могут также использовать отладчик JavaScript, доступный  из меню управления текущей страницей Значок меню текущей страницы -> Разработчикам -> Отладка JavaScript. Или можно использовать сочетание клавиш Ctrl+Shift+l.

Проблемы с изображениями в CSS

Если вы используете изображения или фон посредством CSS и они не правильно выводятся в Chrome, можно конвертировать изображения в разные форматы: GIF, JPG, PNG, чтобы увидеть, поможет ли смена формата решить проблему. Хотя это и бессмысленно на первый взгляд, метод иногда работает, особенно в случае проблем с интервалами и форматированием изображений.

«Первый» CSS хак

Chrome может быть «беспощадным» и игнорировать CSS стили применяемые для определенных элементов веб-страниц. Вы можете попробовать использовать «first-of-type« определение, которое будет игнорироваться всеми другими браузерами (кроме Apple Safari).

Например, если вы хотите получить особый стиль применяемый к <body> вашей веб-страницу только для Chrome, нужно добавить правило типа:

body:first-of-type p {color:#ff0000;}

«First-of-type» будет просто игнорироваться браузерами, для которых уже определен другой стиль для <body>.

GiantIsland CSS хак

Chrome интерпретирует Каскадные таблицы стилей (CSS) иначе, нежели другие браузеры. Например, IE 5, 6 и 7 интерпретируют CSS по другому! GiantIsland CSS хак является относительно простым хаком CSS-размекти, который заключается в использовании квадратных скобок [], чтобы определить CSS для специфических браузеров. В качестве бонуса, он также может помочь вам в согласовании вашего CSS для IE 5, 6, 7, Safari и Firefox одновременно. Более подробно смотрим здесь: http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx.

Держитесь подальше от HTML5

Chrome не пытается соответствовать стандартам API HTML5, несмотря на то что, Webkit, движок его рендеринга, поддерживает HTML5. Если вы используете синтаксис и свойства HTML5, вы, скорее всего, столкнетесь с проблемами. Придерживайтесь стандартов HTML4, и вы не будете иметь проблем. Chrome, скорее всего, станет поддерживать HTML5 в ближайшем будущем.

Проверяйте свои страницы на валидность

Прежде чем ругать Chrome, проверьте свои страницы, чтобы убедиться, что вы случайно не использовали нестандартные HTML свойства. Вы можете проверить любую веб-страницу на http://validator.w3.org/. Некоторые браузеры позволяют допускать небольшие погрешности в веб-стандартах, но Chrome к ним не относится.

Попробуйте страницу в Safari

Если вы не можете заставить ваши страницы выглядеть корректно в Chrome, что бы вы не делали, проверьте ваши страницы в Safari перед тем как сдаваться. Apple Safari это веб-браузер, который доступен для Mac и Windows PC. Chrome и Safari основаны на движке с открытым исходным кодом — «Webkit». Если вы видите ошибку в Safari и Chrome, то есть большая вероятность в того, что это проблема Webkit. Вы можете разместить информацию об ошибке на сайте разработки Webkit http://webkit.org/quality/reporting.html.

Поломка!

Разработчики Chrome реализовали довольно забавные сообщения об ошибке (конечно, если можно считать ошибку забавной). Если Chrome выдает темно-серый экран с сообщением: «Aw Snap!», также может выводиться сообщение: «Что-то пошло не так во время отображения этой веб-страницы», дело может быть не только в вашей странице. Chrome предрасположен к «падению» на некоторых компьютерах в зависимости от настроек системы и установленных приложений. Попробуйте несколько других известных веб-страниц, и посмотрите, не происходит ли с ними то же, что и с вашей страницей. Также попробуйте закрыть Chrome, перезапустить, а затем проверить ваши веб-страницы еще раз. Некоторые люди говорят, что Chrome ведет себя нестабильно на определённых конфигурация PC. Google обещает сделать Chrome более стабильным в следующих релизах.

Отчет об ошибке

Если вы нашли ошибку в в рендеринге Chrome, сообщите об этом! Вы сделаете мир лучше:) Google держит открытым баглист для Chrome на http://code.google.com/p/chromium/issues/list.

P.S.

На окне, возле которого стоит рабочий стол весят горизонтальные жалюзи — очень неудобно, самое время купить жалюзи вертикальные.

Решили сделать подарок женщине — авторский батик Елены Камышанской. Авторские работы ручной росписи — оригинальный и необычный подарок.

Один Ответ к записи “Является ли Google Chrome новым IE 6 для веб-дизайнеров?”

  1. Костя

    Стоит почитать roadmap и featuer list для версии Chrome 2.0
    Интересно что из вышеописанного будет исправлено или изменено в ближайшей версии.
    Пока что я прочитал, что скоро прикрутят поддержку пользовательских плагинов, а на мой взгляд это очень важно для современного броузера.

    Ответить

Оставить комментарий

  • (не будет показан)