HTMLCSS.ru » Deff https://htmlcss.ru Тематическое сообщество, обмен опытом, блоги Tue, 02 Oct 2018 17:55:37 +0000 ru-RU hourly 1 https://wordpress.org/?v=4.1.35 Скруглённые углы средствами CSS https://htmlcss.ru/skrugljonnie_ugli_posredstvom_css/ https://htmlcss.ru/skrugljonnie_ugli_posredstvom_css/#comments Wed, 31 Aug 2011 21:44:52 +0000 Не люблю я разные фичи и примочки АКА *.htc для IE разных поколений. В своё время не раз обжогся на разном поведении фич в ИЕ6 под разными сервис паками винды. И разным поведением stand-alone версии ИЕ7 и обычной. А, поскольку мои заказчики верят, что ИЕ6 и ИЕ7 ещё живы, то в ЦСС3 вникать я не тороплюсь — смысл?
Но сейчас делаю проект, который будет эксплуатироваться исключительно под хромом. И в нём очень много скруглённых углов.
Когда попробовал, насколько просто делать скруглённые углы с помощью border-radius (вне зависимости от цветов, заливок, цветов бордеров для боксов), решил, что фанатизм излишен.

Осваивать CSS3 решил начать с малого — скруглённые углы. Что я нашёл:
Универсальные свойства — годятся для всех нормальных браузеров

.curved {
	-moz-border-radius:10px; / Firefox /
	-webkit-border-radius:10px; / Safari and chrome /
	-khtml-border-radius:10px; / Linux browsers /
	border-radius:10px; / CSS3 /
}

Как обычно, IE6-7-8 отличились, для них скачиваем border-radius.htc и подключаем

.curved {
	behavior:url(border-radius.htc);
	border-radius: 20px;
}

Чтобы ИЕ6-7 нормально отображали скруглённые углы, рекомендуют следующее:

  • каждый элемент должен иметь позиционирование — либо absolute, либо relative
  • элементы, имеющие по умолчанию display:inline, ведут себя загадочно (но не всегда), даже если им задано display:block
  • обязательно, чтобы было задано свойство hasLayout (читаем)
  • у всех углов элемента радиус скругления может быть только одинаковым
  • есть глюк при попытке скруглить углы у полупрозрачного блока — появляется серая полоса
  • не стоит пытаться комбинировать эту фичу с другими

Сразу скажу — ещё не пробовал, как всё это работает. По мере испробования постараюсь что-то дополнить.

Дополняю
Всё вышесказаное мной — полная чушь.
Глючная и требовательная чушь.
Нарыл такую штуку — PIE называется. Реально, безглючная примочка.
Полнофункциональная реализация border-radius, box-shadow и background: linear-gradient.
Просто добавь воды:

.rounded,
.top_nav,
.top_nav li,
.top_nav ul ul,
**** И ЕЩЁ КАКИЕ-ЛИБО СЕЛЕКТОРЫ ****
{behavior:url(js/PIE.htc);}

Прикладываю пример (он же в комментах ниже).

В ходе работы обнаружилась пара глючков:

  • сложности при скруглении углов для элементов, которые по умолчанию инлайновые
  • если задана наружная тень для элемента с незаданным цветом бекграунда — весь элемент заливается самым тёмным цветом из тени. Лечится заданием цвета бекграунда
  • тень съезжает и располагается намного ниже её владельца. Лечится заданием position:relative
  • В IE8 некорректно залился бокс с background-color: transparent; background-image: url(../images/***.png);
]]>
https://htmlcss.ru/skrugljonnie_ugli_posredstvom_css/feed/ 11
Оптимизируем код с помощью jQuery https://htmlcss.ru/optimiziruem_kod_napilnikom/ https://htmlcss.ru/optimiziruem_kod_napilnikom/#comments Wed, 24 Aug 2011 09:49:57 +0000 С тех пор, как я познакомился с jQuery, я стал выносить всякие ненужности (блоки с уголками, разделителями, динамические распорки и т.д.) в яваскрипт-файл и заставлять JQ навешивать все эти красивости-бесполезности.

$(".menu li").append('<div class="menu_l"></div><div class="menu_r"></div>');

Я для себя (и для заков) мотивировал это тем, что в итоге код значительно очищается от такого SEO-мусора, облегчается его разработка. А пользователи с отключенной явой всё-таки смогут воспользоваться функционалом сайта, правда не с таким красивым меню.
Так я и делал долго, но недавно возник спор с программистом: якобы такой метод грузит машину клиента [и мозг разработчика], а гугл сам разберётся что к чему.
Внутри себя я знаю, что хочу ответить по этому поводу, но помогите подобрать доводы.

]]>
https://htmlcss.ru/optimiziruem_kod_napilnikom/feed/ 12
Прелоад через CSS https://htmlcss.ru/preload_cherez_css/ https://htmlcss.ru/preload_cherez_css/#comments Tue, 23 Aug 2011 22:25:14 +0000 Тема актуальна для картинок, которые не видны при первой загрузке страницы. Обычно они находятся в блоках с display:none (разные popup’ы) или используются для подмены при наведении на блок.
Проблема в том, что смена (желаемая) происходит на экране обычно быстрее, чем подгрузка картинок с сервера (особенно актуально для соединений с длинным пингом). Поэтому, чтобы не ждать пока изображение на экране перестанет быть уродливым, есть смысл загрузить все картинки сразу (правда время первой загрузки увеличится).
Нашёл 4 метода для этого:

  • сделать спрайт — поместить картинки, относящиеся к одному объекту и описывающие разные его состояния (спокойной состояние и при наведении курсора) в один файл. А смену картинок реализовать через background-position. Из недостатков — невозможность использования PNG в ие6 и мигание (flicker эффект) в ие — тот считает, что картинку надо всё равно подгружать, в кеш ему заглянуть лень. Но прелоад — это то, что никогда не обсуждается в ТЗ, не входит в мои обязанности и вполне (что логично) реализуемо через JS, поэтому то, что я делаю прелоад — бонус и ИЕ меня в этом случае мало интересует
  • сделать картинку с прозрачными областями и заполнять эти области через background-color. Из моей практики, таких случаев, когда можно применить этот метод — единицы, ведь использовать можно опять-таки только GIF, кроме того, нужно задавать цвет для бекграунда, а при смене цвета для общего фона будет пятно (о любви к заказчикам я уже писал)
  • сегодня нашёл способ — положить картинки, которые нужно закешировать, в бекграунды прочим элементам страницы (ЛЮБЫМ, у которых его нет). А чтобы они не мешали — использовать background-position. Ещё не пробовал, но звучит очень интересно.
]]>
https://htmlcss.ru/preload_cherez_css/feed/ 6
Глюк со сдвигом бэкграунда в IE9 https://htmlcss.ru/gljuk_so_sdvigom_bekgraunda_v_ie9/ https://htmlcss.ru/gljuk_so_sdvigom_bekgraunda_v_ie9/#comments Mon, 30 Nov -0001 00:00:00 +0000 Говорят, есть такое. Насколько я понял, при включенной теме AERO и отделённых вкладках жди беды.
Самая лажа в том, что у меня нет IE9.
Единственное, что я не понял — как пофиксить. Отключать тему или не пользоваться ие9 — предлагать не стоит.

]]>
https://htmlcss.ru/gljuk_so_sdvigom_bekgraunda_v_ie9/feed/ 2
Горизонтальное меню с равными расстояниями между пунктами. https://htmlcss.ru/gorizontalnoe_menju_s_ravnimi_rasstojanijami_mezhdu_punktami/ https://htmlcss.ru/gorizontalnoe_menju_s_ravnimi_rasstojanijami_mezhdu_punktami/#comments Mon, 30 Nov -0001 00:00:00 +0000 К тому же, с возможностью добавлять/убирать пункты, резиновое.
Делимся методиками…

]]>
https://htmlcss.ru/gorizontalnoe_menju_s_ravnimi_rasstojanijami_mezhdu_punktami/feed/ 9
@font-face. Сглаживание бывает разное https://htmlcss.ru/fontface_sglazhivanie_bivaet_raznoe/ https://htmlcss.ru/fontface_sglazhivanie_bivaet_raznoe/#comments Tue, 02 Aug 2011 14:19:59 +0000 Недавно столкнулся с таким глюком: шрифт Helvetica Neue после шрифтобелки выглядит в разных браузерах коряво.
Как должно быть

Как должно быть

Как есть в ФФ3, ИЕ6, ИЕ7, Опере 10

Как есть в ФФ3, ИЕ6, ИЕ7, Опере 10

Нормально было только в ФФ4+.

Как оказалось, шрифты, подгружаемые через @font-face по-разному отрабатываются разными браузерами, и, чтобы навести порядок, нужно задавать различные параметры.
Вот, что предложила дизайнер (чуть не сгорел со стыда:) )

подгружаем как обычно

@font-face {
    font-family: 'HelveticaNeueCyrThin';
    src: url('fonts/helveticaneuecyr-thin-webfont.eot');
    src: url('fonts/helveticaneuecyr-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneuecyr-thin-webfont.woff') format('woff'),
         url('fonts/helveticaneuecyr-thin-webfont.ttf') format('truetype'),
         url('fonts/helveticaneuecyr-thin-webfont.svg#HelveticaNeueCyrThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

селективно настраиваем

/*Для Хрома и Оперы*/
@media screen and (-webkit-min-device-pixel-ratio:0) {  
        @font-face {
            font-family: 'HelveticaNeueCyrThin';
            src: url('fonts/helveticaneuecyr-thin-webfont.eot');
            src: url('fonts/helveticaneuecyr-thin-webfont.svg#HelveticaNeueCyrThin') format('svg');
        }
        /* ну и ещё какие-нибудь свойства можно позадавать */
}

Т.е. ИЕ6 и ИЕ7 вообще пролетают, для них пришлось цвет сделать посерее, чтобы не так заметны были грызанные края.

]]>
https://htmlcss.ru/fontface_sglazhivanie_bivaet_raznoe/feed/ 9
IE7. Умнее. Но не умный. https://htmlcss.ru/ie7_umnee_no_ne_umnij/ https://htmlcss.ru/ie7_umnee_no_ne_umnij/#comments Mon, 30 Nov -0001 00:00:00 +0000 Предлагаю составить список причин, вызывающих появление горизонтального скролл-бара в ие7. Обычно это float:right и right:XXXpx. Но закономерность я никак не пойму.

]]>
https://htmlcss.ru/ie7_umnee_no_ne_umnij/feed/ 4
Спрайт для бордеров/углов https://htmlcss.ru/sprajt_dlja_borderovuglov/ https://htmlcss.ru/sprajt_dlja_borderovuglov/#comments Mon, 30 Nov -0001 00:00:00 +0000 Как сделать спрайт для рамки, в которой графикой отрисованы все углы и границы? Так, чтоб границы рисовались с зацикливанием.

]]>
https://htmlcss.ru/sprajt_dlja_borderovuglov/feed/ 13
Глюки браузеров https://htmlcss.ru/gljuki_brauzerov/ https://htmlcss.ru/gljuki_brauzerov/#comments Mon, 30 Nov -0001 00:00:00 +0000 Предлагаю писать сюда доказанные (лучше даже проверенные на собственном опыте) глюки браузеров. Только значимые глюки.
IE6:

  • Если для элемента задан фильтр, то для него задаётся overflow:hidden. Попробуйте вынести что-то абсолютом из блока с фоновой картинкой в ПНГ :) (IE6+IE7)
  • Z-index считается по-другому — первоочередное значение имеет z-index родителя (IE6+IE7)
  • Элемент с position:relative или absolute, у которого фильтром задана ПНГ-картинка, всегда будет поверх ссылки, которая в нём находится (IE6+IE7)
  • Бывает, пропадает ХЗ куда абсолютный блок (например лого), если в хеадере есть паддинг. Почему — не понятно. Иногда помогает поменять абсолютные блоки местами (IE6+IE7).
  • Бывает, пропадает блок с абсолютным позиционированием, если за ним следует блок с заданным свойством float:left|right (IE6+IE7)

IE7:

  • Если ПНГ-картинка подгружена обычным способом, то $(elem).fadeOut() глючит — чернеет в процессе ратворения. Нужно подключать ПНГ-картинку, как и в ИЕ6, через фильтр (IE6+IE7+IE8).

Safari:

  • Размеры картинок (если не заданы в аттрибутах) становятся доступны только после загрузки картинок. А яваскрипт из хедера отрабатывается до. Поэтому получаются нулевые значения
]]>
https://htmlcss.ru/gljuki_brauzerov/feed/ 5
Взаимоотношение margin-top и margin-bottom https://htmlcss.ru/vzaimootnoshenie_margintop_i_marginbottom/ https://htmlcss.ru/vzaimootnoshenie_margintop_i_marginbottom/#comments Mon, 30 Nov -0001 00:00:00 +0000 Насколько я понимаю, margin-bottom у вышележащего элемента и margin-top у нижележащего элемента взаимонакладываются.
Кто может на пальцах растолковать, почему тогда себя так странно ведёт положительный margin-top у элемента, у которого нет вышележащего собрата? Т.е. в этом случае margin-top распространяется на его родителя?

]]>
https://htmlcss.ru/vzaimootnoshenie_margintop_i_marginbottom/feed/ 9