Весенняя эйфория. Треугольники. Группируем шрифты Блеск и нищета… font-family – оперативный выбор и сравнение.

Trifler Blog

Весенняя эйфория. Треугольники.

Весною все не так,
Бессилен прежний опыт,
Заведомый пустяк – 
Круговорот и омут…

Gordi


Бывает иногда, наступает время ничего не деланья. Все откладывается в сторону до лучших времен. За окном весна, что наводит уже на совершенно «левые» мысли. Милые дамы снимают зимние кольчуги, обнажаясь и расцветая, стреляя во всю глазками, вводя в неописуемый грех. Весенняя эйфория, закрадывается в истощенный, разболтанный до не возможности отсутствием витаминов, серыми хмурыми днями, хотя зима и была похожа на позднюю осень, что радости, тем не менее, не прибавляло совершенно, организм…

$, тоже в подвешенном состоянии, играет туда сюда и не знает, куда ему податься – то ли упасть в бездонную пропасть, то ли взлететь до заоблачных вершин.

Очередной опус Мастера "Неожиданный испуг бакса собственной тени" - не лишен субъектива с известной долей пессимизма и, как ласковый весенний ветерок, грозящий превратиться в бурю по имени дефолт, навевает легкую тоску и печаль. Но виртуальное общение с ним, позволяет мне думать, не смотря ни на что, все будет хорошо :) К тому же он не одинок в своем мнении, а уж в подаче оного, даст солидную фору паре-тройке доцентов с кандидатами и иже с ними, что так часто и так заумно глаголют о чем угодно, но почти всегда, находясь явно не в «теме», делая из нас совершеннейших идиотов, словно мы дети и только вчера народились на свет белый…

Еще одна отрада, начался футбольный сезон, смотрю редко, но болею, тая надежду, что, в конце концов, и на нашей улице будет праздник…

Эх, водочки бы холодной по более в граненых стаканах, пластмассовые стаканчики, такая гадость, чокнуться по настоящему нельзя. Теплая дружеская компания, где-нибудь на берегу речки, с полным ассортиментом заядлых рыболовов, сам не рыбак, так же, как и друзья, да и водка не на первом и даже не на втором месте, главное, чтоб хватило - было бы о чем вспомнить, о чем поговорить :)

К примеру, о шахматах, коим автор отдал приличную часть своей жизни. А, что? Хотя, параллели и аналогии с версткой совершенно не уместны, но все же. Про объем необходимой информации, для более или менее приличного уровня понимания, даже и говорить не хочется, сравнение явно не в пользу верстки, это как сравнивать букварь для первоклашек с Большой Советской Энциклопедией энного количества томов.

А лимит времени на принятие решения, а сумасшедшая ответственность, связанная с выбором хода, это вам не макет страницы, который можно шлифовать до бесконечности. Так, что заблуждаются многие «гуру» от верстки, проповедующие "дзен" и проникновение в самые, что ни на есть, потаенные, придуманные им же самими уголки таинственного дизайна и загадочных web-стандартов, чушь все это собачья, откровенно говоря, по большому-то, гамбугскому счету.

Все гораздо проще. Набор необходимых знаний html и css и практика. А если продолжить аналогию с шахматами, то соперников от силы четыре, пять, ну да, постоянно играем черными, но всегда побеждаем :)

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

Сразу оговорюсь, ничто не ново под луной. Десятки, сотни, а может и тысячи раз, в самых различных вариациях, с изрядной долей изощренности, было показанно и рассказанно, стоит только поискать. Другое дело, что в большинстве случаев, все повешено на тег а.

Мы же чуть сместим акценты. Считайте это моей прихотью, ссылка в моем понимании, должна менять только цвет на :hover и ничего более, для всех других эффектов существует контейнер в который она вложена, а для меню-то, это как раз то, что доктор прописал. К тому же, в одном из примеров это позволит добиться разнообразия и индивидуальности в оформлении, что в обычном исполнении вряд ли возможно.

Естественно, предстоит помучаться с IE6, но не преодолимых препятствий, как вы понимаете, здесь не существует. Скриптик из шести строк и пара лишних строчек стилевых правил в таблице стилей для «любимого» браузера, решают и эту проблему.

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

Скажу больше – с помощью всего шести строк кода, подчеркиваю 6 (шести), ничего не меняя в нем, могу подвесить :hover практически на любой тег с различной степени вложенности, все будет определяться только стилевыми правилами, примеров на страницах блога достаточно, поиск вам в руки :)

Не стоит обращаться с просьбами, как это сделать в том или ином случае. Автор плывет по течению своих часто не осознанных в полной мере представлений, что делать, о чем писать. Работа на заказ его тяготит, из-за свойственной ему лени и необязательности :)

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

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

Для особо не внимательных, читаем внимательно "Trifler Blog". Есть "трудности перевода"?

Что ж, и приступим не спеша…

Посмотрим, к чему стремимся. Скриншот.

меню с треуголником по :hover

Стоп, говорю сам себе, про треугольники в следующий раз :)

Группируем шрифты

Предыдущий пост слегка получился печальным. Но не все так плохо…

Продолжим изыскания по теме. Прежде чем двинуться дальше стоит определиться с группами шрифтов. На предлагаемой вам тест-странице, часть из предложенных шрифтов разбита на группы. По аналогии с безопасной палитрой цветов, назовем шрифты, которые являются дефолтными для браузеров IE6(7), FF, OPERA и Safari таким же термином.

Повторюсь, пока откладываем в сторону проблемы размера и единиц измерения, тем более что в Safari дефолтное значение размера отличается в меньшую сторону. И к этой проблеме мы еще вернемся и постараемся осветить ее максимально подробно.

Так же стоит уточнить следующий момент – все рассуждения и высказывания автора относятся только к тексту, который будет находиться в области контента и который является основой статей, публикаций и постов. Именно на данное обстоятельство и делается упор.

Итак, первая группа выглядит следующим образом:

default (общий)

  • Default
  • Times New Roman
  • Sans-serif
  • New York
  • Geneva

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

Далее.

Группа OPERA:

  • Fantasy
  • Terminal

Одинаково смотрятся в этом браузере, но первый является дефолтным для IE, а второй для FireFox, Safari. Что ту скажешь, остается только развести руками.

Группа Safari:

  • MS Sans Serif
  • Times

Те же проблемы. Times является дефолтным для IE6(7), FF, OPERA.

Группа № 1:

  • Arial
  • Helvetica
  • Serif

Тут Helvetica дефолт для OPERA.

Разные.

Действительно разные. Шрифты этой группы, не все естественно, подойдут для заголовков, меню и этим их применение по большом счету и ограничивается.

Из всего выше сказанного можно сделать предварительный вывод – используя безопасную палитру шрифтов, можно оставить в стороне все изыски визуальной совместимости, таких разных, но кем-то так любимых браузеров, что они готовы пожертвовать не любимыми, совершенно забывая о тех, приходит к ним в гости.

Естественно, проблема увеличения/уменьшения размера шрифта с помощью набора инструментов предоставляемых нам браузерами остается, но этот вопрос будет, затронут в следующих статьях.


Блеск и нищета… font-family – оперативный выбор и сравнение.

Размер шрифта, гарнитура, относительные или фиксированные единицы измерения, где и как найти золотую середину? Сколько копий сломано и сколько еще будет? А браузеры? Бог ты мой, так и хочется вернуть СССР с его ГОСТ-ом. Едва ли производители данного продукта, когда-либо смогут договориться между собой, нам всем на радость, бизнес и конкуренция, и пофиг им стандарты и спецификации от W3C.

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

Ах, если бы…

Касался этих вопросов в своих публикациях, ссылки не привожу, ищем и находим.

Чтобы кто не говорил, а то, как выглядит текст в IE7, мне очень нравится, оставим в покое размер, шрифт, единицы измерения. Нравится и все тут. То же самое Safari.

Покончим с риторическими вопросами и претензиями, кто их услышит, кому это надо?

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

Может быть, что-то подобное, кто-то реализует иначе, поделитесь опытом.

Прыг: 25 26 27 28 29 30 31 32 33 34 35
Скок: 10 20 30

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

февраль, 2012
пн вт ср чт пт сб вс
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29        
free  counters