Атрибуты селекторов
В свободную минутку посвятил себя дальнейшему развитию. В этот раз удалось разобраться с атрибутами селекторов, так как данную вещь довольно часто встречаю.
Что же это такое? И так начнем.
Для начала конечно можно посмотреть спецификацию CSS 2.0.
Вдоволь насмотревшись на спецификацию, можно прийти к выводу, что в данном случае селектор работает так. Для примера измение бордер для кнопки через CSS:
input[type="button"] {border:solid 1px #000;}
Прозрачность PNG и IE6 или как все таки правильно
Елы-палы. По другому не сказать. Возникла проблема при создание сайта с прозрачностью PNG в IE6. Стал рыться и в Яндексе и в Гугле. На куче разных сайтов множество общих решений. Из которых суть не ясна. Вот решил сам написать. В кратце начну с того, почему все таки верстальщики выбирают PNG а не GIF.
Тут два пункта:
- Цветов в PNG гораздо больше чем в GIF. В GIF всего 256 цветов
- PNG поддерживает прозрачность в любой градации от 0 до 100%. У GIF либо точка прозрачна либо нет. Т.е. нет золотой и нужной середины.
Получается, что если выхотите создать дейтсвительно красивый сайт, то придется использовать PNG. Отсюда у нас, у верстальщиков возникают проблемы с разработкой шаблонов. Решение обсуждаем дальше
Min-height, min-width, max-height, max-width для IE6
Хочу показать пример, как реализовывать гибкий шаблон не только на div, но и на таблицах. В последнее время очень много народ зависает на теме "эластичный шаблон на div-ах.". К чему такая паника, если можно это реализовать на таблицах. Все будет красиво и понятно. Я с div конечно дружу. Но не очень люблю делать шаблоны просто на них. Кроссверстка таблицы/div оптимальна.
Самая большая проблема в этой верстке это гибкость. Современные браузеры отлично понимают ограничения высоты и ширины через min- и max- инструкции. Но к сожалению ИЕ 6 с ним не дружит.
Для этого я использую expression от мелкомягких.
Как подключить CSS для Safari, Internet Explorer, Firefox, Safari, Google Chrome
При верстке сложного шаблона для Joomla, наткнулся на пару неприятных вещей. Не могу добиться кроссбраузерного отображения вида маркированного списка. Благо интернет великая вещь, который подарил ответ на данный вопрос.
И так как это делать - подключать стили CSS для каждого браузера?
Разница между ID и CLASS
Id и class это "крючки"
Мы можем различными путями описать содержимое HTML/XHTML документа. Основные элементы такие, как <h1>, <p> and <ul> выполняют свою работу, но основной набор тегов не может покрыть каждый возможное оформление страничного элемента или слоя. Для этого нам нужно ID и сlasses. Для примера <ul id=”nav”>, это даст нам шанс оформить этот маркированный список по своему желанию так, что мы сможем манипулировать его уникальностью по сравнению с другими маркированными списками на нашей странице. Или мы должны иметь раздел на нашей странице, который не имеет релевантных тегов: <div id=”footer”>. Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом: <div class=”sidebar-box”>.
И какова все таки разница между ними?
Размер шрифта в em для IE 6.0
Сегодня верстал шаблон (как я люблю это дело) и нашел маленький баг в IE 6.0. Может и не совсем баг, но он меня доконал.
В последнее время люблю делать эластичный шаблоны. Один из важных факторов, чтобы размеры шрифтов тоже были эластичными, для этого и придумали такую систему измерений как em.
Так вот если ставить размеры шрифтов в CSS с указанием единицы измерения em, то новые браузеры нормально рассчитывают кегель. А вот IE почему то уменьшает в обратную сторону. Елы-палы. Для этого пришлось создавать отдельный файл-хак для IE 6.0, в котором размеры шрифтов можно проставить или в % или в px.
Народ меняйте браузеры на современные, вы получите удовольствие от них, точнее от просмотра страниц в вебе.