Расположить вкладки вплотную к краю экрана при развернутом окне браузера
Браузер Opera состоит из пяти групп экранных элементов:
На панели меню для Mac доступны следующие элементы:
Панель вкладок позволяет переходить с одной страницы на другую при одновременном просмотре нескольких страниц. Нажмите на вкладку страницы, чтобы просмотреть ее содержимое. Чтобы открыть новую вкладку, нажмите кнопку + на панели вкладок.
С помощью кнопок навигации можно переходить на необходимые страницы браузера:
В области просмотра отображается содержимое страницы. Именно здесь вы взаимодействуете со страницей: читаете текст, просматриваете изображения, переходите по ссылкам и т.д.
Боковая панель
Боковая панель Opera – это быстрый доступ к пространствам, мессенджерам, закладкам, мой Flow, персональным новостям, вкладкам, истории, расширениям, загрузкам и настройкам.
Боковая панель может быть закреплена и видна на каждой странице браузера, или вы можете скрыть ее для удобства при просмотре других страниц. Сделать это можно через Easy Setup (Простые настройки).
Управление боковой панелью Opera
Чтобы настроить боковую панель, щелкните значок с тремя точками внизу боковой панели. Откроется панель настроек боковой панели, позволяющая редактировать или удалять элементы на боковой панели, такие как пространства, мессенджеры, историю, расширения, а также другие функции и инструменты.
Для доступа к настройкам боковой панели перейдите в меню Settings (Настройки) (Preferences (Настройки) на Mac) > Basic (Основные) > Sidebar (Боковая панель).
Вкладки
Opera может организовать несколько страниц в одном окне с помощью вкладок, которые напоминают ярлыки папок для бумаг. Вкладки позволяют работать одновременно с несколькими страницами, не закрывая страницу, пока она нужна.
Чтобы открыть новую вкладку, нажмите кнопку + на панели вкладок.
Щелкните правой кнопкой мыши на вкладку, чтобы открыть ее контекстное меню. В этом меню доступны следующее действия для вкладки:
- Создать вкладку
- Обновить
- Обновить все вкладки
- Копировать адрес страницы
- Дублировать вкладку
- Зафиксировать вкладку
- Переместить вкладку в пространство
- Выключить звук на вкладке
- Выключить звук на остальных вкладках
- Закрыть вкладку
- Закрыть другие вкладки
- Закрыть вкладки справа
- Закрыть вкладки справа
- Закрыть повторяющиеся вкладки
- Сохранить все вкладки как папку на Экспресс-панели
- Открыть последнюю закрытую вкладку
Перемещение по вкладкам
Функция перемещения по вкладкам – это всплывающее окно с предварительным просмотром вкладок, которое позволяет переключаться между миниатюрами открытых вкладок. Нажмите и удерживайте нажатой клавишу Ctrl, а затем нажмите клавишу «Tab», чтобы вызвать функцию. Нажмите на нужную вкладку или отпустите Ctrl, чтобы переключиться на выделенную в данный момент вкладку.
Предпросмотр содержимого вкладки
Чтобы просмотреть содержимое вкладки, не уходя с текущей страницы, можно навести указатель мыши на вкладку. Предпросмотр вкладок особенно удобен, если открыто много страниц. Включить предпросмотр вкладок можно в настройках Opera. Чтобы включить или выключить предпросмотр вкладок, выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе User interface (Интерфейс пользователя) установите флажок Show tab previews (Показывать миниатюры вкладок при наведении).
Закрытие вкладок
Чтобы закрыть вкладку, наведите на нее указатель мыши и нажмите кнопку x. Чтобы закрыть все вкладки, кроме текущей, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по текущей вкладке и выберите Close Other Tabs (Закрыть остальные вкладки) . Кроме того, можно закрыть все вкладки справа от текущей вкладки, нажав Close Tabs to the Right (Закрыть вкладки справа).
Если вы закрыли вкладку случайно или хотите открыть недавно закрытую вкладку, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Reopen Last Other Tabs (Открыть последнюю закрытую вкладку).
Фиксация вкладок
Фиксация вкладок позволяет Opera предотвратить случайное закрытие вкладок или выделить важные страницы. Зафиксированная вкладка не может быть закрыта. Чтобы закрепить вкладку на панели вкладок или открепить ее, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Pin Tab / Unpin Tab (Зафиксировать вкладку/Отменить фиксацию вкладки) . Зафиксированная вкладка перемещается в левую часть панели вкладок, откуда ее можно быстро открыть.
Перемещение вкладок между пространствами
Рабочие области доступны в верхней части боковой панели и позволяют организовывать вкладки в разные группы. Например, у вас могут быть разные рабочие пространства для покупок, работы или учебы.
Чтобы переместить вкладку в другое пространство, щелкните левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на вкладку и выберите «Переместить вкладку в пространство», затем выберите нужную рабочую область во всплывающем окне.
Управление вкладками
Если вы хотите, чтобы открытая вкладка отображалась в отдельном окне, просто перетащите вкладку с панели вкладок. Вкладки также можно перетаскивать между открытыми окнами.
Если вы хотите открыть копию страницы в новой вкладке, удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) по вкладке и выберите Duplicate Tab (Дублировать вкладку) .
Если вы работаете с большим количеством открытых вкладок, иногда они могут дублироваться. Наведите указатель мыши на одну из вкладок, и браузер Opera выделит повторяющиеся вкладки. Чтобы закрыть все повторяющиеся вкладки, щелкните правой кнопкой мыши одну из вкладок и выберите Закрыть повторяющиеся вкладки.
Все вкладки, открытые в окне, можно сохранить в качестве папки Экспресс-панели. Удерживая Ctrl, нажмите левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на панели вкладок и выберите Save Tabs as Speed Dial Folder (Сохранить вкладки группой на Экспресс-панели) . Внизу Экспресс-панели появится новая папка без названия.
Открытие закрытых вкладок и просмотр синхронизированных вкладок через меню вкладок
Если вы любите открывать сразу много вкладок, с помощью меню вкладок вам легче будет их упорядочивать, просматривать и открывать нужные.
Меню вкладок находится в правой части панели вкладок. Нажмите меню вкладок, чтобы увидеть список недавно закрытых вкладок и открыть вкладки со всех синхронизируемых устройств.
Взаимодействовать с меню вкладок можно с клавиатуры. Нажмите Ctrl + M, чтобы открыть или закрыть меню вкладок. Для перехода по списку вкладок нажимайте кнопки со стрелками. Нажмите Ввод, чтобы открыть вкладку из списка.
Чтобы пользоваться меню вкладок было еще удобнее, имеет смысл включить предпросмотр вкладок.
Контекстное меню
Контекстное меню появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) на каком-либо элементе веб-страницы. Вид меню зависит от типа элемента (страница, текст, ссылка или картинка).
Контекстное меню страницы появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) в любом месте страницы, где нет никаких ссылок, картинок или текста. В этом меню предлагаются различные варианты навигации (вернуться назад, перейти вперед или перезагрузить страницу), а также варианты сохранения страницы на Экспресс-панели или в закладках, просмотра исходного кода страницы, сохранения страницы в формате PDF и т.д.
Контекстное меню ссылки появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) ссылку, и позволяет выбрать, как открыть или сохранить соответствующую страницу или адрес.
Контекстное меню изображения появляется, когда вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какую-либо картинку, и предлагает варианты открытия, копирования или сохранения этой картинки.
Если вы, удерживая Ctrl, нажимаете левой кнопкой мыши (Mac) или правой кнопкой мыши (Win/Lin) какое-либо изображение, с которым связана ссылка, в появившемся меню будут присутствовать пункты меню и для изображения, и для ссылки.
Изменение масштаба
Функция изменения масштаба в Opera позволяет упростить чтение мелкого шрифта. Чтобы изменить масштаб в Mac, выберите View (Вид) > Zoom In (Увеличить) / Zoom Out (Уменьшить) . Пользователям Windows или Linux следует перейти в меню O > Zoom (Масштаб). Таким образом вы установите масштаб только для страницы на которой актуально находитесь.
Для увеличения и уменьшения также можно использовать сочетания клавиш Ctrl или ⌘ + + / - .
Чтобы все просматриваемые страницы открывались в нужном масштабе, можно задать масштаб по умолчанию. Чтобы задать масштаб по умолчанию, выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Basic (Основные) на боковой панели.
- В разделе Appearance (Оформление) вы найдете Page zoom (Масштаб страницы).
- Выберите, в каком масштабе вам хотелось бы просматривать страницы.
После установки масштаба страницы все открываемые вами страницы будут отображаться в заданном масштабе. Если у вас были открыты какие-либо вкладки, перезагрузите их, чтобы просмотреть страницы в только что заданном масштабе по умолчанию.
Если нужно вернуться к первоначальному формату, пользователям Mac следует нажать View (Вид) > Actual Size (Фактический размер). Пользователям Windows и Linux следует перейти в меню O > Zoom (Масштаб) и выбрать Reset zoom (Сброс масштабирования) справа от +.
Полноэкранный режим
Opera позволяет просматривать страницы в полноэкранном режиме. В полноэкранном режиме панель меню не видна, однако панель вкладок и объединенная адресная строка и строка поиска остаются на экране.
В любом из этих режимов пользователи Mac могут вызвать панель меню на экран, наведя курсор мыши на верхнюю границу экрана.
Для выхода из полноэкраннного режима на любой платформе нажмите Esc.
Поиск текста на странице
Opera может искать ключевые слова в тексте на странице. Чтобы найти слово или фразу на странице, нажмите клавиши Ctrl + F или ⌘ + F на клавиатуре. Введите текст в поле поиска.
В процессе поиска найденные слова выделяются зеленым цветом. Если слово встречается на странице неоднократно, найденные слова выделяются желтым цветом и в поле поиска указывается их количество. Для перехода от одного найденного слова к другому используйте правую или левую стрелку.
Загрузка и управление файлами
При этом справа от объединенной адресной строки и строки поиска появляется новый значок. Нажмите этот значок, чтобы просмотреть перечень недавно загруженных файлов или удалить их из истории загрузок.
Чтобы посмотреть подробный список загруженных файлов, запустить файлы из браузера или заново начать загрузку в случае обрыва соединения, выберите View (Вид) > Downloads (Загрузки) на Mac. В Windows и Linux перейдите в меню O > Downloads (Загрузки) .
Местоположение, где по умолчанию сохраняются загруженные файлы, можно изменить в настройках. Для этого выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Downloads (Загрузки) нажмите кнопку Change… (Изменить…) .
- Выберите папку, в которой должны сохраняться загруженные файлы, и нажмите Select (Выбрать) .
Кроме того, в этом меню можно настроить браузер таким образом, чтобы он всегда спрашивал, куда необходимо сохранить загружаемые файлы.
Опытные пользователи Opera наверняка долго будут с грустью вспоминать тот момент, когда, перейдя с собственного движка Presto на Blink от Google, их любимый браузер в одночасье потерял львиную долю привычных функций.
Сегодня, спустя полтора года после тех событий многое уже вернулось в Opera, а часть настроек, возвращающих некоторый былой функционал, по различным причинам скрыта от рядового пользователя.
О том, как включить скрытые настройки Opera мы расскажем в этой статье.
Первую группу скрытых по умолчанию опций найти проще простого. Зайдите в настройки программы, прокрутите первую же страничку до конца чтобы увидеть пункт «Показать дополнительные настройки».
Щелчок по этой опции мгновенно отобразит перед вами первую группу скрытых настроек Opera. Отличить их от других можно по наличию точечки рядом с чекбоксом:
По состоянию на Opera 24 в этой группе пользователь может обнаружить следующие новые настройки:
- Загружать фоновые вкладки с задержкой (при запуске Opera будет загружать вкладки, оставшиеся с предыдущего сеанса просмотра, по мере ваших кликов по ним, а не все сразу. Это ускорит старт браузера и сэкономит память);
- Показывать полный URL-адрес в комбинированной адресной строке и строке поиска;
- Расположить вкладки вплотную к краю экрана при развёрнутом окне браузера (отключит полоску высотой в один пиксель над панель вкладок, предназначенную для масштабирования окна);
- Использовать большие миниатюры на Экспресс-панели;
- Максимальное число колонок (позволит настраивать число столбцов в экспресс-панели);
- Использовать аппаратное ускорение, если доступно.
В целом, первая группа настроек скрыта весьма условно и, скорее всего, вы знали о ней и до нашего описания. Зато о второй группе опций, которые находятся здесь же, но тоже по умолчанию не отображаются, знают уже далеко не все.Чтобы их увидеть вам необходимо проделать оригинальную комбинацию. Находясь в настройках Opera нажмите последовательно на клавиатуре следующие клавиши: Вверх, Вверх, Вниз, Вниз, Влево, Вправо, Влево, Вправо, B, A, Enter.
Как только вы это сделайте, перед вами появится всплывающее окно с грозным предупреждением о том, что никакой ответственности за ваши действия со скрытыми настройками создатели браузера не несут.
Несмотря на серьёзность предупреждения, чего-то архиважного во второй группе скрытых опций (по состоянию на Opera 24) нет. Да и самих настроек тут немного. Если скрытые пункты первой группы обозначаются точкой рядом с чекбоксом, то здесь сбоку появляется восклицательный знак, а сама опция выделяется серым фоном.
Пользователю открываются следующие новые параметры:
- Задержка предпросмотра вкладок (регулировка функции Tab Preview (Tab Peek), появившейся в Opera 24. Позволяет регулировать скорость отображения большого превью вкладок при наведении на них курсора мыши);
- Миниатюры на Экспресс-панели (настройка ширины и высоты превью на экспресс-панели);
- Скрыть поле поиска на Экспресс-панели;
- Всегда показывать настройки для опытных пользователей (позволяет в следующий раз не вводить никаких комбинаций и изначально видеть скрытые настройки).
Наконец, третья группы настроек находится на служебной странице «opera://flags». Чтобы перейти к этой страничке её название без кавычек необходимо скопировать в адресную строку браузера и нажать Enter.
Здесь экспериментальных функций больше всего. В Opera 24 их было более сотни. В обязанности локализаторов, очевидно, не входит перевод описания настроек на этой странице, поэтому все эти описания исключительно на английском. Более того, ряд функций на этой странице даже после активации может оказаться неработоспособным или работать криво. После включения или отключения любой из опций здесь обязателен перезапуск браузера.
Некоторые из настроек, что есть «opera://flags» позволяют включать в Opera особенности, которые появятся в следующей версии. Например, в Opera 24 можно включить PDF-вьювер, менеджер закладок (у нас не заработал) и экспресс-панель в стиле экспериментального браузера Coast, что будут включены по умолчанию только в 25-ой версии. Таким образом, не всегда обязательно уходить на тестовый канал, чтобы попробовать отдельные его фишки.
Настроек на этой служебной странице очень много, но львиная доля из них заинтересует скорее разработчиков, чем простых пользователей, поэтому мы позволим себе остановиться лишь на наиболее интересных, на наш взгляд, опциях:
- Tab cycling – в случае переключения этой настройки в состояние «включено», при нажатии Ctrl+Tab на клавиатуре вы будете перебирать вкладки по порядку их последнего использования, а не по очереди, как это происходит сейчас;
- Synchronization и Use Synchronization test servers – частично оживляют потерянную после перехода на новый движок функциональность синхронизации данных. Работает в экспериментальном режиме, к чему следует отнестись предельно серьёзно;
- Tab hibernation – позволяет выгружать из памяти содержимое открытых, но давно не использовавшихся вкладок. Пригодится тем, кто любит работать с большим числом табов, но не разжился большим объёмом оперативной памяти;
- Opera Turbo, version 2 и Video compression in Opera Turbo 2 – вторая версия фирменной технологии Turbo, отвечающей за сжатие данных и, как следствие, ускоренную загрузку страниц. Рекомендуется на медленных соединениях;
- Enable DirectWrite – включает отрисовку шрифтов в программе через DirectWrite. В Chrome подобное было включено по умолчанию в версии 37, после чего запрос как вернуть старые шрифты в Chrome стал весьма популярен, так что, на любителя;
- Overlay scrollbars – включает экспериментальные полосы прокрутки, которые в разы компактнее тех, что используются в Windows;
- Save Page as MHTML – возвращает в Opera утраченную возможность сохранять страницы одним файлом (веб-архивом) Соответствующая опция появится в диалоге сохранения страниц, вызываемом нажатием Ctrl+S.
Таким образом, мы обозначали три группы скрытых настроек Opera. К сожалению, многих привычных особенной, например таких, как выделение текста посреди ссылок в браузер пока не вернуть. Некоторые настройки норвежцы, похоже, умышленно скрывают сами. Например, изменить поиск Яндекс на Google в Opera можно только ручной правкой файлов веб-обозревателя. И всё же постепенно былые функции возвращаются в программу. Напомним, в Opera 25 пользователи вновь увидят новый менеджер закладок.
Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я практически никогда не сталкивался с некими указаниями по тестированию какого-то проекта, в которых сказано, что страницы исследуют путём уменьшения высоты окна браузера. Возможно, вы когда-нибудь ловили себя на такой мысли: «Надо ли проверять страницы в окнах браузера разной высоты?». Я полагаю, что делать это надо, и собираюсь убедить в этом всех, кто прочитает эту статью.
При работе над веб-сайтом не очень правильно делать некие предположения, не опираясь на реальные данные. Поэтому очень важно брать на себя ответственность по проверке сайтов в окнах браузеров разной ширины и разной высоты.
Зачем проверять страницы в окнах браузеров разной высоты?
Хороший вопрос. Прежде чем переходить к примерам и к сценариям использования таких проверок, мне хотелось бы рассказать о проблемах, которые случаются с сайтами, не приспособленными к работе в областях просмотра разной высоты. Это поможет вам лучше понять то, о чём речь пойдёт дальше.
Неправильные предположения о том, как будут пользоваться сайтом, — это один из важнейших факторов, негативно влияющих на работу веб-дизайнера. Например, неправильно будет рассчитывать на то, что сайтом будут пользоваться, разворачивая браузер на весь экран. Вместо этого нужно рассчитывать на худшее.
Предположения и реальность
Выше приведена иллюстрация моих слов. В реальности далеко не все пользователи работают с браузерами так, как предполагает дизайнер. Я сам сталкивался с сайтами, которые плохо выглядели в окнах браузеров уменьшенной высоты.
Инструменты разработчика браузера
Изменение размеров браузера по вертикали — это не единственный способ воздействия на высоту области просмотра. Так, например, когда открывают панель инструментов разработчика, она тоже отнимает часть вертикального пространства.
Панель инструментов разработчика занимает часть окна браузера
Открытие инструментов разработчика может «поломать» дизайн сайта или пролить свет на проблемы, возможность появления которых никто не ожидал. Выделенная область рисунка представляет текущую высоту области просмотра. Если открыть инструменты разработчика, просматривая сайт на маленьком экране ноутбука, это приведёт к тому, что видимой окажется лишь небольшая область страницы.
Подумаем над одним важным вопросом: «Можно ли улучшить впечатления пользователя от работы с сайтом в то время, когда его просматривают в окне браузера небольшой высоты?». Я могу дать положительный ответ на этот вопрос. Полагаю, теории нам хватит. Давайте учиться «вертикальному» подходу к стилизации страниц.
«Вертикальный» CSS
Некоторые дизайнеры и разработчики уделяют основное внимание внешнему виду страницы, который она принимает в окнах разной ширины. При этом они отодвигают на второй план исследование поведения страницы в окнах разной высоты. А это — очень важно. Например, некто работает над дизайном страницы и ему дали инструкции относительно того, как некий компонент должен выглядеть в окнах браузера разной ширины. А как насчёт окон разной высоты?
На большом телефоне навигационные элементы заполняют доступное вертикальное пространство. На телефоне среднего размера уменьшается размер шрифта и расстояние между элементами. На маленьком телефоне вертикального пространства недостаточно для вывода всех элементов. Поэтому они размещаются в 2 колонки.
На этом рисунке показано навигационное меню, внешний вид которого подстраивается под высоту области просмотра. Цель дизайнера заключается в том, чтобы меню заполнило бы всё доступное ему пространство. На небольших экранах уменьшается размер шрифта и расстояние между элементами меню. Если же экран телефона совсем мал (например, как у iPhone 5), элементы выводятся в двух колонках. Подобные сценарии использования сайтов часто упускают из виду. В результате сайты или совсем не приспосабливают к работе на экранах разной высоты, или оптимизируют их лишь тогда, когда какой-нибудь посетитель сайта сообщит о проблеме.
В деле подстройки сайта под области просмотра разной высоты нам может помочь CSS. А именно, речь идёт о двух основных техниках:
- Медиазапросы, учитывающие высоту области просмотра.
- Единицы измерения, имеющие отношение к области просмотра.
Медиазапросы, учитывающие высоту области просмотра
Как вы, наверняка, уже знаете, в CSS можно использовать медиазапросы, учитывающие ширину области просмотра:
А вот медиазапросы, учитывающие высоту окон браузеров, используются гораздо реже:
Единицы измерения, имеющие отношение к области просмотра
Использование единиц измерения, имеющих отношение к размерам области просмотра, может помочь в деле улучшения впечатлений пользователей от работы с сайтами. Например, с учётом высоты области просмотра можно регулировать расстояние между элементами по вертикали.
Чем выше окно браузера — тем больше расстояние между элементами
Всё это может показаться приятной мелочью, ни на что особо не влияющей, но лишь до тех пор, пока не взглянуть на подобную страницу на большом мониторе — вроде 27-дюймового дисплея iMac. Тогда окажется, что высота области просмотра слишком велика. Но у нас, к счастью, есть способ ограничить размеры margin-bottom . Сделать это можно, например, следующими способами:
- С помощью медиазапросов.
- С использованием CSS-функций сравнения.
Второй способ заключается в использовании CSS-функции clamp() . При подборе значений, передаваемых этой функции, мы, в данном случае, задаём минимальный размер отступа, равный 10px , максимальный — 50px , а значения, находящиеся между этими двумя, зависят от размеров окна браузера.
Если вам эта тема интересна — взгляните на мои статьи о единицах измерения, зависящих от размеров области просмотра страницы и о CSS-функциях.
Ниже мы поговорим о различных способах использования «вертикальных» медиазапросов.
Примеры и сценарии
▍Элементы страниц, накладывающиеся друг на друга при изменении высоты окна браузера
В этом примере рассматривается страница, в верхнем разделе которой имеется заголовок и иллюстрация. Высота этой части страницы составляет 100vh , что равносильно 100% высоты области просмотра.
Верхняя часть страницы высотой 100vh
Выглядит всё это очень хорошо, но лишь до тех пор, пока не уменьшится высота окна браузера. Высоты верхней части страницы не хватит для того чтобы вместить иллюстрацию и текст. В результате элементы верхней части страницы перекроют содержимое других её разделов.
Уменьшение высоты окна браузера «ломает» дизайн
Обратите внимание на то, как изображения накладываются на раздел страницы, расположенный под её верхней частью. Происходит это из-за того, что им не хватает места. Взглянем на код к этому примеру.
Рассмотрим несколько вариантов решения подобных проблем:
- Можно задать изображению фиксированные размеры (свойства width и height ), а не только его ширину ( width ). Отсутствие свойства height — это одна из причин нашей проблемы.
- Можно применять к верхнему разделу страницы свойство height: 100vh только в том случае, если высота области просмотра больше 700px (понятно, что конкретные значения, используемые в медиазапросе, будут зависеть от каждой конкретной ситуации).
Итак, мы решили, что «вертикальные» медиазапросы — это стабильный и полезный механизм. Но использование значения 100vh — дело рискованное, так как, если даже можно ограничить размеры изображения, может случиться так, что размеры текста ограничить не получится. Например, если текст в верхнем разделе страницы окажется длиннее, то мы столкнёмся с новым вариантом уже знакомой нам проблемы.
Текст перекрывает раздел сайта, в котором его быть не должно
Для исправления этой проблемы можно, вместо свойства height , использовать свойство min-height . При таком подходе, в том случае, если содержимое раздела окажется больше, чем он способен вместить, его размеры увеличатся и его содержимое не перекроет следующий раздел.
▍Фиксированный заголовок страницы
Нет ничего плохого в том, чтобы заголовок страницы оставался бы на одном месте при её прокрутке. Но нужно сделать так, чтобы этот заголовок имел бы фиксированную позицию только в том случае, если на экране достаточно вертикального пространства.
Фиксированный заголовок страницы
Тут показан сайт, который просматривают в ландшафтном режиме. Обратите внимание на то, что заголовок занимает слишком много вертикального пространства. Важно ли это для пользователя? В большинстве случаев — нет. Но улучшить ощущения пользователя от работы с сайтом можно, прибегнув к следующему медиазапросу:
При таком подходе в ландшафтном режиме заголовок фиксироваться не будет.
▍Скрытие элементов, которые менее важны, чем другие
Я заметил это в навигационном меню Twitter. А именно, речь идёт о комбинации «вертикальных» медиазапросов и паттерна Priority+.
Выделенные элементы будут скрыты в том случае, если им не хватит места
Когда меняется высота области просмотра, менее важные элементы (пункты меню Bookmarks и Lists ) становятся подпунктами пункта More . Это — хороший пример использования «вертикальных» медиазапросов.
А вот — мой твит, в котором анализируется применение этого подхода в Twitter.
▍Навигационные элементы и изменение высоты области просмотра
Следующий пример связан с предыдущим. Имеется вертикальная навигационная панель (боковая панель, сайдбар). Если высота области просмотра невелика — можно немного уменьшить вертикальное расстояние между навигационными элементами, что слегка улучшит внешний вид страницы.
Расстояние между элементами и высота области просмотра
Вот стили к этому примеру:
А тут можно посмотреть видео к нему.
Кроме того, можно отметить, что в подобной ситуации модификации можно подвергнуть и размер шрифта, что, при уменьшении высоты окна браузера, даст ещё больше места для элементов.
▍Верхний раздел страницы и высота области просмотра
Верхнему разделу страницы нужно некоторое свободное вертикальное пространство, дающее ему немного «воздуха». Размеры этого пространства могут зависеть от высоты области просмотра.
Чем выше страница — тем больше «воздуха».
Так выглядят стили к этому примеру:
▍Модальные компоненты
Как вы, возможно, уже знаете, от модальных компонентов ожидается, как минимум, горизонтальное выравнивание по центру. Но может понадобиться выровнять подобный элемент и по вертикали. Это возможно, но приводит к неприятностям при изменении объёмов данных, выводимых такими элементами.
Если модальный элемент содержит правильный объём данных, то выглядит он, как показано ниже, очень хорошо.
Правильный модальный элемент
Вот стили для этого элемента:
А вот если в таком же элементе нужно будет вывести больше текста — всё уже будет далеко не так хорошо. А именно, элемент заполнит экран по вертикали и пользователь не сможет прокручивать его содержимое.
Слишком высокий модальный элемент
Эта проблема возникает по следующим причинам:
- У модального элемента не задана высота.
- Элемент центрован по вертикали (это ускорит появление проблемы).
Обратите внимание на то, что тут использованы свойства min-height и min-width . Первое нужно для того чтобы элемент выглядел бы хорошо даже в тех случаях, когда он выводит короткий текст. А второе позволяет ограничить его высоту заданным значением вместо того, чтобы задавать ему неизменную высоту.
Модальный элемент, подходящий для вывода длинных текстов
Итоги
Проектируя сайты с учётом тех впечатлений, которые вызовет работа с ними у пользователей, лучше всего строить их дизайн, опираясь на ширину и высоту окна браузера. Может, кому-то покажется странным тестирование страниц в окнах разной высоты, но такое тестирование себя оправдывает. Здесь я рассказал о важности «вертикального» подхода к дизайну сайтов, о том, как проектировать страницы в расчёте на их правильный вывод в областях просмотра разной высоты, рассмотрел примеры. Надеюсь, вам всё это пригодится.
Обращаете ли вы внимание на то, как создаваемые вами веб-страницы выглядят в окнах браузера разной высоты?
Перед тем как подробно изучать, что представляет собой Opera и функции Settings, необходимо обратить внимание на моменты, которые можно изменить в этой распространенной программе:
- Первое на что стоит обратить внимание, это основные опции утилиты.
- Также вы можете редактировать параметры сайтов.
- Особое внимание стоит обратить на безопасность серфинга.
- На завершающем этапе, также следует рассмотреть дополнительные параметры.
Учитывая все эти моменты, вы сможете довольно легко превратить обозреватель в мощный и самое главное комфортный инструмент для серфинга по просторам сети интернет.
Важно! Следует отметить, что после любого внесения изменений в текущие параметры, рекомендуется перезагружать утилиту, что позволит в дальнейшем избежать возможных проявлений сбоев и ошибок в работе.
Раздел сайты
Достаточно важная категория параметров для комфортного и безопасного пребывания в сети в процессе серфинга. Как правило, здесь, пользователи могут задать определенные опции по посещаемым ресурсам, выставить стартовую страницу, задать поисковую систему, а кроме того отсеять порталы, которые не пригодны для вашего пребывания на просторах сети. Дополнительно, вы также можете установить порядок хранения личных данных для входа на тот или иной тематический ресурс через используемый интернет-обозреватель.
Дополнительные и скрытые настройки
Этот раздел отвечает больше за различные дополнительные возможности, которыми наделена программа Опера. Пользователи в этой категории функций смогут активировать или отключить журнал, поменять место на жестком диске для хранения данных, убрать Яндекс Дзен из браузера Опера, а кроме того внести некоторые изменения в интерфейс и потенциал головной утилиты. Зайти в этот подраздел вы можете через меню, перейдя в параметры утилиты, и опустившись в самый низ.
Как включить скрытые настройки Opera
Опытные пользователи Opera наверняка долго будут с грустью вспоминать тот момент, когда, перейдя с собственного движка Presto на Blink от Google, их любимый браузер в одночасье потерял львиную долю привычных функций.
Сегодня, спустя полтора года после тех событий многое уже вернулось в Opera, а часть настроек, возвращающих некоторый былой функционал, по различным причинам скрыта от рядового пользователя.
О том, как включить скрытые настройки Opera мы расскажем в этой статье.
Первую группу скрытых по умолчанию опций найти проще простого. Зайдите в настройки программы, прокрутите первую же страничку до конца чтобы увидеть пункт «Показать дополнительные настройки».
Щелчок по этой опции мгновенно отобразит перед вами первую группу скрытых настроек Opera. Отличить их от других можно по наличию точечки рядом с чекбоксом:
По состоянию на Opera 24 в этой группе пользователь может обнаружить следующие новые настройки:
- Загружать фоновые вкладки с задержкой (при запуске Opera будет загружать вкладки, оставшиеся с предыдущего сеанса просмотра, по мере ваших кликов по ним, а не все сразу. Это ускорит старт браузера и сэкономит память);
- Показывать полный URL-адрес в комбинированной адресной строке и строке поиска;
- Расположить вкладки вплотную к краю экрана при развёрнутом окне браузера (отключит полоску высотой в один пиксель над панель вкладок, предназначенную для масштабирования окна);
- Использовать большие миниатюры на Экспресс-панели;
- Максимальное число колонок (позволит настраивать число столбцов в экспресс-панели);
- Использовать аппаратное ускорение, если доступно.
В целом, первая группа настроек скрыта весьма условно и, скорее всего, вы знали о ней и до нашего описания. Зато о второй группе опций, которые находятся здесь же, но тоже по умолчанию не отображаются, знают уже далеко не все.Чтобы их увидеть вам необходимо проделать оригинальную комбинацию. Находясь в настройках Opera нажмите последовательно на клавиатуре следующие клавиши: Вверх, Вверх, Вниз, Вниз, Влево, Вправо, Влево, Вправо, B, A, Enter.
Как только вы это сделайте, перед вами появится всплывающее окно с грозным предупреждением о том, что никакой ответственности за ваши действия со скрытыми настройками создатели браузера не несут.
Несмотря на серьёзность предупреждения, чего-то архиважного во второй группе скрытых опций (по состоянию на Opera 24) нет. Да и самих настроек тут немного. Если скрытые пункты первой группы обозначаются точкой рядом с чекбоксом, то здесь сбоку появляется восклицательный знак, а сама опция выделяется серым фоном.
Пользователю открываются следующие новые параметры:
- Задержка предпросмотра вкладок (регулировка функции Tab Preview (Tab Peek), появившейся в Opera 24. Позволяет регулировать скорость отображения большого превью вкладок при наведении на них курсора мыши);
- Миниатюры на Экспресс-панели (настройка ширины и высоты превью на экспресс-панели);
- Скрыть поле поиска на Экспресс-панели;
- Всегда показывать настройки для опытных пользователей (позволяет в следующий раз не вводить никаких комбинаций и изначально видеть скрытые настройки).
Наконец, третья группы настроек находится на служебной странице «opera://flags». Чтобы перейти к этой страничке её название без кавычек необходимо скопировать в адресную строку браузера и нажать Enter.
Здесь экспериментальных функций больше всего. В Opera 24 их было более сотни. В обязанности локализаторов, очевидно, не входит перевод описания настроек на этой странице, поэтому все эти описания исключительно на английском. Более того, ряд функций на этой странице даже после активации может оказаться неработоспособным или работать криво. После включения или отключения любой из опций здесь обязателен перезапуск браузера.
Некоторые из настроек, что есть «opera://flags» позволяют включать в Opera особенности, которые появятся в следующей версии. Например, в Opera 24 можно включить PDF-вьювер, менеджер закладок (у нас не заработал) и экспресс-панель в стиле экспериментального браузера Coast, что будут включены по умолчанию только в 25-ой версии. Таким образом, не всегда обязательно уходить на тестовый канал, чтобы попробовать отдельные его фишки.
Настроек на этой служебной странице очень много, но львиная доля из них заинтересует скорее разработчиков, чем простых пользователей, поэтому мы позволим себе остановиться лишь на наиболее интересных, на наш взгляд, опциях:
- Tab cycling – в случае переключения этой настройки в состояние «включено», при нажатии Ctrl+Tab на клавиатуре вы будете перебирать вкладки по порядку их последнего использования, а не по очереди, как это происходит сейчас;
- Synchronization и Use Synchronization test servers – частично оживляют потерянную после перехода на новый движок функциональность синхронизации данных. Работает в экспериментальном режиме, к чему следует отнестись предельно серьёзно;
- Tab hibernation – позволяет выгружать из памяти содержимое открытых, но давно не использовавшихся вкладок. Пригодится тем, кто любит работать с большим числом табов, но не разжился большим объёмом оперативной памяти;
- Opera Turbo, version 2 и Video compression in Opera Turbo 2 – вторая версия фирменной технологии Turbo, отвечающей за сжатие данных и, как следствие, ускоренную загрузку страниц. Рекомендуется на медленных соединениях;
- Enable DirectWrite – включает отрисовку шрифтов в программе через DirectWrite. В Chrome подобное было включено по умолчанию в версии 37, после чего запрос как вернуть старые шрифты в Chrome стал весьма популярен, так что, на любителя;
- Overlay scrollbars – включает экспериментальные полосы прокрутки, которые в разы компактнее тех, что используются в Windows;
- Save Page as MHTML – возвращает в Opera утраченную возможность сохранять страницы одним файлом (веб-архивом) Соответствующая опция появится в диалоге сохранения страниц, вызываемом нажатием Ctrl+S.
Таким образом, мы обозначали три группы скрытых настроек Opera. К сожалению, многих привычных особенной, например таких, как выделение текста посреди ссылок в браузер пока не вернуть. Некоторые настройки норвежцы, похоже, умышленно скрывают сами. Например, изменить поиск Яндекс на Google в Opera можно только ручной правкой файлов веб-обозревателя. И всё же постепенно былые функции возвращаются в программу. Напомним, в Opera 25 пользователи вновь увидят новый менеджер закладок.
Сброс настроек браузера Опера
Следует отметить, что в это приложение встроена прекрасная функция, которая позволяет откатить все изменения до заводских установок. Чтобы это сделать, вам потребуется следующее:
- Необходимо запустить утилиту на компьютере или ноутбуке.
- Зайти во вкладку меню программы.
- Выбрать параметры приложения, и найти дополнительные значения.
- Здесь будет отдельная вкладка «Сброс настроек Опера».
- Активировав эту функцию, интернет-обозреватель вернется к прежним значениям.
Стоит отметить, что вы также предварительно можете сохранить текущие возможности в резервной копии, чтобы впоследствии при необходимости восстановить и применить их для обозревателя.
Важно! Также выполнить сброс настроек можно иным путем, а именно сделав полноценную переустановку утилиты, либо обновив ее до актуальной модификации.
В настоящее время далеко не каждый юзер обращает внимание на полноценные возможности интернет-обозревателя, а ведь эта программа может стать чем-то большим нежели простым инструментом для серфинга в сети. Здесь самое главное правильно изменить функции, а после сохранить возможности, что позволит существенным образом преобразовать работу приложения и скорость обработки веб-ресурсов.
Способ 1. Импорт в Опере
В Опере есть раздел для импорта закладок, опций и других данных. Он позволит загрузить профиль из другого обозревателя, например, Internet Explorer. Для этого выполните следующие действия:
- Откройте Оперу и перейдите в раздел меню «Закладки», «Импорт закладок и настроек…».
- В открывшемся окне укажите источник импорта (веб-браузер или HTML-файл), выберите опции для переноса и нажмите кнопку «Импортировать».
- О завершении импорта сообщит другое окно. Нажмите «Готово».
Замечание. Выполнить экспорт параметров профиля в Опере можно только вручную, выбрав и скопировав отдельные файлы из директории веб-браузера.
После того как разработчики браузера Opera перешли на движок Blink от Google, программа лишилась некоторых функций, к которым уже привыкли пользователи. Однако, в интернет-обозревателе имеются скрытые настройки. О них знают не все пользователи, при этом с их помощью можно значительно расширить функциональность программы.
Дополнительные настройки
На самом деле в браузере имеется несколько групп скрытых настроек. К первой из них добраться достаточно просто. Для этого делаем следующее:
- Нажимаем кнопку Opera. .
- В открывшемся окне спускаемся в самый низ.
- Ставим выделение рядом с предложением показывать дополнительные настройки.
После того, как вы все это проделаете, вы увидите, что в списках параметров появились новые конфигурации. Их отличие от обычных в том, что рядом с чекбоксом будет находиться небольшая серая точка. Для того чтобы не видеть эти настройки, просто снимаем выделение рядом с надписью «Показывать дополнительные настройки».
В последних версиях браузера появилась функция, которая позволяет загрузить фоновые вкладки с задержкой. Это значит, что при открытии программы вкладки, которые остались с предыдущего сеанса, будут загружаться только если пользователь кликнет по ним, а не сразу. Подобная функция позволяет увеличить скорость открытия Opera. Также скрытые настройки могут помочь настроить количество столбцов в экспресс-панели.
Кроме того, пользователю предлагается расположить вкладки близко к краю экрана. Если вы установите выделение рядом с этой настройкой, то заметите, что исчезнет полоска, расположенная над панелью вкладок. Можно будет установить параметр, благодаря которому в адресной строке будет отображаться полный URL-адрес веб-страницы.
Вторая группа скрытых настроек
Если с первой группой скрытых настроек встречались многие пользователи, то о второй мало кто слышал. Для того чтобы активировать эти параметры, необходимо будет выполнить следующее:
- Запускаем браузер.
- Нажимаем на кнопку Opera.
- Переходим в настройки.
- Нажимаем последовательно стрелочки вверх, вверх, вниз, вниз.
- Далее влево-вправо, влево-вправо и, наконец, В, А, Ввод.
Кроме того, названия настроек будут выделены серым цветом. Следующее, что здесь появилось – это опция, которая предназначена для того, чтобы скрыть поле поиска, расположенное на экспресс-панели. Также можно будет настраивать размеры (ширину и высоту) миниатюр, которые находятся на ней.
Экспериментальные функции
Особо следует отметить экспериментальные функции, встроенные в интернет-обозреватель. Чтобы перейти к ним в адресную строку вводим opera://flags и жмем Ввод. На открывшейся странице можно увидеть список дополнительных функций, предлагающимися разработчиками. В 25 версии браузера их около ста.
В самом верху на странице будет располагаться предупреждение. В нем сказано о том, что использование функций этой категории может привести к сбоям в работе программы. Связано это с тем, что, как понятно из названия, опции пока находятся на экспериментальной стадии. Минусом является то, что описание функций на английском языке. Поэтому разобраться, что здесь за что отвечает может быть проблематично.
Часто опции из этой категории в следующей версии браузера становятся основными настройками. К примеру, для 24 версии Opera PDF-вьювер и менеджер закладок являются экспериментальными, в 25 варианте программы они уже официально включены.
Изменения настроек через файлы конфигурации
Редактирование файлов настроек также является способом изменить параметры и улучшить функциональность программы. Расположены они обычно в системной папке, созданной браузером. Узнать конкретное место можно в пункте меню О программе.
Совет. В пути могут быть скрытые папки, например, AppData. Поэтому предварительно включите отображение таких файлов.
Информация с настройками содержится обычно в файлах с расширением .ini, поэтому нас интересуют именно они. Их редактирование позволяет расширять функциональность программы. К примеру, максимальное количество сайтов, которые могут быть на экспресс-панели – 25 штук. Увеличить это число через обычные настройки не получится. Если же открыть через блокнот файл speeddial.ini, то можно установить напротив rows количество необходимых строчек, а рядом с columns – количество столбцов. Сохраняем файл, перезагружаем браузер и смотрим, вступили ли изменения в силу.
Файл urlfilter.ini отвечает за блокировку рекламы. В него также можно вносить изменения, редактируя его через Блокнот. Фильтры записываются в разделе exclude. Запреты, относящиеся ко всем сайтам, с обеих сторон заключаются в звездочки. Кроме того, здесь можно прописать какой-либо сайт, на который браузеру будет запрещен доступ. Его необходимо с двух сторон выделить знаками /.
Скрытые настройки в браузере Opera предназначены для разнообразных целей. Большинство из них незаменимы для веб-разработчиков. Но это не значит, что эти опции не понадобятся обычному пользователю. Ведь они могут помочь расширить функционал интернет-обозревателя и настроить его по собственному усмотрению.
Читайте также: