Исследование высоты BODY
Кобзарёв Михаил
2019-07-12T17:13:28+00:00
Верстка
Исследование высоты BODY
Небольшое исследование поведения элемента BODY в различных браузерах. Отступы от границ окна (margin, padding). Высота BODY и ее изменение в зависимости от высоты контента в Internet Explorer 6, Firefox 1.5, Opera 8.
Верстка табов с помощью <dl>
Кобзарёв Михаил
2019-04-29T17:44:53+00:00
Верстка
Верстка табов с помощью <dl>
Когда-то возникла необходимость сделать табы на странице. Это довольно типовая задача, поэтому, чтобы не изобретать велосипед, полез в Гугл посмотреть, как народ делает.
Вложенные ссылки в HTML
Кобзарёв Михаил
2016-10-03T19:33:06+00:00
Верстка
Вложенные ссылки в HTML
Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но, буквально на днях, Роман Комаров (разработчик интерфейсов в Яндексе) предложил поистине простой и вполне рабочий вариант решения данной проблемы.
Исправляем css hover эффект на тач-устройствах
Кобзарёв Михаил
2018-01-15T11:05:04+00:00
Верстка
Исправляем css hover эффект на тач-устройствах
При создании каскадного меню сайта, реализованного при помощи ненумерованного списка, с вложенным тегом <ul>, которое должно было появляться при наведении на родительский <li>, столкнулся с тем, что псевдокласс hover дико переглючивает на iPad, отчего меню совсем перестает работать.
HTML6
Кобзарёв Михаил
2016-10-03T21:17:45+00:00
Верстка
HTML6
Блуждая по просторам интернета, я нашел очень активный и интересный «проект» на GitHub, который, к счастью, не очень популярен. И его официальный сайт. Зацените.
Треугольник на чистом CSS
Кобзарёв Михаил
2018-01-29T15:39:06+00:00
Верстка
Треугольник на чистом CSS
Для того, чтобы сделать треугольник на чистом CSS достаточно использовать всего один блок
и пару строк стилей.
CSS: Текст поверх линии
Кобзарёв Михаил
2016-10-03T23:15:50+00:00
Верстка
CSS: Текст поверх линии
Очень часто дизайнеры требует от верстальщиков писать текст поверх линии на неоднородном фоне.
Читая сегодня Хабр, увидел очередной велосипед и решил поделиться своим вариантом решения данной проблемы.
Property ‘submit’ of object #<HTMLFormElement> is not a function
Кобзарёв Михаил
2016-10-03T23:22:24+00:00
Программирование
Property ‘submit’ of object #<HTMLFormElement> is not a function
Если вы вдруг получили такую ошибку при отправке формы — проверьте, не названа ли кнопка отправки формы submit.
CSS анимация для «техники жёлтого затухания»
Кобзарёв Михаил
2016-11-25T14:59:11+00:00
Верстка
CSS анимация для «техники жёлтого затухания»
Не думаю, что я первый, кому пришла в голову эта идея, но всё же задокументирую её.
Если вы не знакомы с этой техникой, прочтите статью «Web Interface Design Tip: The Yellow Fade Technique».
Этот дизайнерский эффект, ставший не так давно достаточно популярным, был использован 37 signals в ситуации, когда новый контент добавлялся на страницу и к нему пытались привлечь внимание пользователей.
Сокращения, используемые программистами
Кобзарёв Михаил
2019-10-29T01:48:23+00:00
Программирование
Сокращения, используемые программистами
Предлагаю подборку технических аббревиатур (сокращений), используемых мною при написании кода (название переменных, функций, методов, классов, свойств) и понятных человеку со знанием английского.
Emmet — набор инструментов для веб-разработчиков
Кобзарёв Михаил
2016-10-20T14:06:09+00:00
Верстка
Emmet — набор инструментов для веб-разработчиков
Emmet (ранее известный как Zen Coding) — это набор инструментов веб-разработчика, который упрощает рабочий процесс по написанию CSS и HTML кода. Он раскрывает аббревиатуры. Начать его изучение стоит с синтаксиса аббревиатур и доступных действий. Уже сейчас есть множество плагинов для популярных редакторов.
Адаптивный веб-дизайн: bookmarklet
Кобзарёв Михаил
2016-10-07T11:42:44+00:00
Верстка
Адаптивный веб-дизайн: bookmarklet
Отзывчивый веб-дизайн (Responsive Web Design или сокращенно RWD) имеет ряд преимуществ перед обычным дизайном:
- Сайт одинаково хорошо выглядит практически на любом устройстве при любом разрешении экрана и любой ориентации дисплея;
- Одна верстка вместо нескольких вариантов сайта под разные устройства (Mobile, PDA, iPone, iPad);
- Это простая и веселая технология — все крутые парни используют ее.
В то время как отзывчивый веб-дизайн становится всё популярнее, инструментов для помощи разработчикам больше не становится. Многие из них похожи на утилиту Мэтта Керсли, которая показывает одну и ту же страницу во фреймах различного размера. Это полезно только для «живых» сайтов, которые уже есть в интернете, а что делать, если вы ведете разработку локально?
Что нам даст отказ от IE6?
Кобзарёв Михаил
2016-10-07T11:57:13+00:00
Верстка
Что нам даст отказ от IE6?
При отказе от поддержки IE6 в своих проектах, то получите целый ряд новых и продвинутых CSS-свойств.
С днем веб-мастера
Кобзарёв Михаил
2016-10-07T13:03:55+00:00
Верстка
С днем веб-мастера
Сегодня во всем мире веб-дизайнеры и веб-разработчики празднуют день веб-мастера. Поздравляю всех веб-мастеров с праздником! Да умрёт IE6!
Elegantizr – новый HTML/CSS-фреймворк от Google
Кобзарёв Михаил
2017-01-09T17:54:25+00:00
Верстка
Elegantizr – новый HTML/CSS-фреймворк от Google
Создание сайтов — это искусство и наука одновременно, и каждый сайт уникален. Однако, некоторые задачи «всплывают» снова и снова, особенно когда речь идет о базовом оформлении сайта. Чтобы облегчить создание сайтов, существуют фреймворки, которые на основе заранее заданных конструкций в разметке предлагают некое начальное оформление.
Elegantizr — тоже такой фреймворк.
Запрет выделения текста на веб-странице
Кобзарёв Михаил
2016-10-11T21:19:45+00:00
Программирование
Запрет выделения текста на веб-странице
Бывают ситуации, когда пользователю необходимо запретить выделять текст на веб-странице или в каком-то определенном блоке, например при Drag&Drop. Попробуем найти кроссбраузерное решение.
Внедрение PDF на веб-страницу
Кобзарёв Михаил
2016-10-11T21:23:14+00:00
Программирование
Внедрение PDF на веб-страницу
Для внедрения PDF документа на веб-страницу есть несколько способов. Правда, ни один из них не является кроссбраузерным. Рассмотрим один из них.
Релиз JetBrains PhpStorm 2.0
Кобзарёв Михаил
2016-10-17T18:54:25+00:00
Soft
Релиз JetBrains PhpStorm 2.0
PhpStorm – триальная IDE на Java, предоставляет богатые и умные функции редактирования кода PHP с подсветкой синтаксиса, расширенным форматированием кода конфигурации и исправлением на лету ошибок и смарт-кода.
Вторая часть квеста за лучшую среду разработки для PHP завершена.
Ставим правильные ссылки на ICQ и Skype
Кобзарёв Михаил
2016-10-18T00:42:10+00:00
Браузеры
Ставим правильные ссылки на ICQ и Skype
Поставить ссылку на ICQ или Skype клиентов на первый взгдяд весьма простая задача. Но не все так просто, как может показаться на первый взгляд. Есть несколько нюансов. Погуглив, решил собрать все воедино, дабы использовать в качестве памятки.
Вкладки (табы) на чистом CSS
Кобзарёв Михаил
2017-09-08T16:42:28+00:00
Верстка
Вкладки (табы) на чистом CSS
Обнаружил в интернете очень простой способ создания табов (сменяющих друг друга блоков с контентом). Обычно подобные вещи делаются с помощью javascript, либо сейчас еще экспериментируют с CSS3. Данный пример обходится без этого.
Переключение IE8 в режим совместимости
Кобзарёв Михаил
2020-04-20T13:33:47+00:00
Верстка
Переключение IE8 в режим совместимости
Один из читателей моего блога недавно сказал, что мой сайт вообще не открывается в IE8. Я проверил — не работает: браузер начинает жрать 100% проца и потом падает.
Начал с простого: отключил все скрипты и стили — не помогло. Удалил пролог XHTML — сайт сразу же заработал. Стало очевидным, что дело именно в режиме работы браузера. Вернул Doctype на место и переключил браузер в режим совместимости с IE7
Сайт заработал как часы.
Если у вас статический сайт с кучей HTML-страниц и сервер Apache, есть более рациональное решение, чтобы не лопатить каждый файл, вставляя туда meta-тег. В .htaccess пишем:
Тем самым мы заставим наш сервер посылать нужные заголовки. Это, конечно, всё костыли, просто нужно верстать, учитывая различия браузеров и их версий.
Горизонтальное Dropline меню на CSS и jQuery
Кобзарёв Михаил
2020-04-14T12:05:17+00:00
Верстка
Горизонтальное Dropline меню на CSS и jQuery
Для создания Dropline меню достаточно HTML4 и CSS2, но всеми известный Internet Explorer 6 постоянно портит картину и приходится ставить ему очередной костыль в виде пару строк на jQuery.
Эмуляция альфа-канала в Internet Explorer 6
Кобзарёв Михаил
2019-12-27T16:41:59+00:00
Браузеры
Эмуляция альфа-канала в Internet Explorer 6
Как известно, Internet Explorer 6 не поддерживает полупрозрачность PNG-24 (альфа-канал), с которыми он работает как триггер, имея два состояние — прозрачность есть, прозрачности нет.
TTF шрифты на веб-странице
Кобзарёв Михаил
2017-10-26T10:57:36+00:00
Браузеры
TTF шрифты на веб-странице
Хотите использовать не стандартный шрифт на вашей веб-странице? Уже сейчас многие браузеры способны отображать TTF-шрифты, используя только CSS: последние версии Firefox, Opera, IE6, IE7, IE8 и Safari (Mac).
