Firefox → Особенность position:fixed, или почему мне пришлось заблокировать боковые вертикальные кнопочки типа «Оставьте свой отзыв»
Описанный эффект наблюдается под Firefox и на слабеньких ноутбуках, по этому пользователям такой комбинации посвящается.
Проблема
При наличие на странице элемента с position:fixed, в Firefox резко ухудшается плавность перерисовки страницы при скроллинге: страница скролится заметно медленнее а в области станицы, на одном уровне с таким элементом, наблюдаются искажения. И при всём этом сильно нагружается CPU. Всё это создаёт дискомфорт при сёрфинге.
Google → Моноширинный шрифт и подсветка синтаксиса в GMail
Я давно перешел на использование gmail как единственной почты и счастлив :) Но одного сильно не хватало — возможности выводить текст письма моноширинным шрифтом. Это бывает просто необходимо при чтении всяких писем с «отформатированными» простым текстом табличками (и прочим ASCII-art), потому что в gmail они выглядят так:
В мире существует несколько решений, позволяющих использовать fixed font в gmail — но я не нашел ни одного удобного в использовании и работающего с современной версией интерфейса gmail. Поэтому я написал grasemonkey-скрипт для решения этой проблемы: userscripts.org/scripts/show/37471 — он добавляет в правой колонке страницы просмотра письма ссылку «Fixed Font», переключающую режим отображения. Теперь
В мире существует несколько решений, позволяющих использовать fixed font в gmail — но я не нашел ни одного удобного в использовании и работающего с современной версией интерфейса gmail. Поэтому я написал grasemonkey-скрипт для решения этой проблемы: userscripts.org/scripts/show/37471 — он добавляет в правой колонке страницы просмотра письма ссылку «Fixed Font», переключающую режим отображения. Теперь
Веб-разработка → Position fixed IE6 + Drag-and-Drop
Много было про то написано, да не суть…
Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.
Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.
Каскадные Таблицы Стилей → CSS макеты: фиксированные, резиновые, эластичные. Плюсы и минусы
Примечание: ниже выложен перевод статьи «CSS Layouts: The Fixed. The Fluid. The Elastic.», в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки).
Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.
Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.
Веб-разработка → Фиксируя полноценный fixed
В статье Шитова (студия Лебедева) описан полноценно работающий fixed.
Дошли у меня руки до создания такого fixed и решил попользоваться предложенным решением.
Но оно не заработало. Начал изучать исходный код статьи (ну там то работает) и в итоге выяснил, что дело в DOCTYPE. Как известно Лебедеву на него положить, а я вот написал его. Именно он выключал fixed в IE.
Дошли у меня руки до создания такого fixed и решил попользоваться предложенным решением.
Но оно не заработало. Начал изучать исходный код статьи (ну там то работает) и в итоге выяснил, что дело в DOCTYPE. Как известно Лебедеву на него положить, а я вот написал его. Именно он выключал fixed в IE.