суббота, ноября 22, 2008
пятница, ноября 21, 2008
Превращаем IE6 в нормальный браузер
Спонсор месяца:
Конкурс екологічних банерів - призовий фонд 500 грн
Что такое “нормальный” браузер для вебмастера? Это браузер, который, как минимум, понимает, что такое min-width, min-height, [atrr], корректно отображает PNG и не удивляется тегу abbr.
Чтобы заставить IE6 стать “нормальным” браузером, придумано уже масса JS-решений. Но действительно хороших, все же, не так много. Поэтому хочу предложить вам 2 JS скрипта, которыми пользуюсь сама.
Подарите настроение вашим близким! Эти великолепные букеты из роз растопят любое женское сердце!
Производство качественного пенобетона. Звоните по тел. в Москве: (495) 649-54-22.
Компания «Элит-Пласт» предлагает пенопласт и пенополистирол по низким ценам. Спешите утеплить свой дом к зиме!
Удивите вашу любимую! Закажите доставку цветов на дом.
Панели оператора Hakko Electronics: широкий выбор серий!
IE7.js JavaScript library
Как не трудно догадаться, этот скрипт превращает IE6 в IE7, т.е. позволяет работать в IE6 со всеми свойствами, поддерживаемыми IE7:
CSS селекторы:
parent > child
.multiple.classes
:hover
:first-child
[attr]
[attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"]
[attr*="value"]
CSS свойства:
Background-image - PNG alpha transparency (IE5.5+)
Background-attachment - Support fixed positioning
Position - Support fixed positioning
Margin - Support auto (IE5.x)
Cursor - Support pointer for IE5.x
Display - Convert list-item to block for IE5.x
HTML
img - PNG alpha transparency
abbr - Bug fixed
Размер - 71.1 KB
На мой взгляд, очень хороший скрипт - здесь собрано решение самых актуальных багов IE6. Кстати на домашней страничке скрипта есть еще и IE8.js, который позволяет работать с IE6-7, как с IE8.
И еще одна IE7 JS библиотека
превращающая IE5.5+ в IE7 и гораздо меньшая по весу! Содержит следующие возможности:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr=«value»], [attr~=«value»] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()
- overflow:visible
- min/max-width/height
- position:fixed
- поддержка импортированных стилей
- поддержка блочной модели
- корректная работа с элементами abbr, object
- стандартизиирована работа с формами
- поддержка PNG прозрачности
Размер - 11Кб
Знаете другие интересные решения? Делитесь :)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
среда, ноября 12, 2008
Форум vs Блог: а где вы ищете ответы?
Ух, как же редко сейчас получается писать в блог… Столько тем интересных вокруг, а времени просто нет :( Последнюю неделю активно занимаюсь кодингом (на php) и время от времени приходиться заглядывать на форумы для веб-разработчиков в поисках ответов.
Я уже давно заметила у многих такую тенденцию, что нет ничего лучше, чем спросить на форуме/блоге у живых людей, чем самостоятельно что-то искать. Думаю, здесь играет роль фактор времени, т.к. шанс найти ответ на форуме выше, чем на 120й странице электронного справочника.. Особенно высока эффективность такого поиска, если отвечающие сами сталкивались с тем же вопросом и решение дано на 100% правильное.
Вот так гуляя по сети в поисках ответов, нашла интересный молодой форум для веб-разработчиков Make4You. Название говорит само за себя, хотя мне почему-то кажется, что в названии лучше бы звучало прошедшее время made - “сделано для вас”. Ну, не в этом суть :)
Мир Покера - Всё об онлайн покере: новости, статьи, бонусы, фрироллы, видео.
Компания “АлюмСтальМонтаж” предлагает качественное остекление фасадов большими стеклопакетами.
Где купить мини атс? Позвоните в компанию “Линк Телеком”.
Быстрый и качественный ремонт сотовых телефонов по низким ценам.
Для аренды крана-манипулятора лучше всего позвонить в компанию MegaKran в московской области.
Наверное, каждый из вас хотя бы раз задумывался над вопросом разработки какой-то новой идеи, новом веб-проекте, которого еще не существует в сети. Придумать что-то новое, в свете существующего разнообразия проектов, действительно трудно. Я давно собираю информацию на эту тему, именно поэтому мое внимание на этом форуме привлекли 2 вопроса: Сложности при создании Internet-проекта и Web-индустрия и Web-прогресс. Конечно, в сети такой информации просто тьма, но все же гораздо интересней узнать самые свежие мнения на эти темы.
Я согласна с ответом одного из участников ветки “Креативную идею можно воплотить только 1 раз”. Все остальное - копии, подобия, и в большинстве своем, никчемные. Конечно, взять существующую супер-идею и улучшить ее возможности в сотни раз - это несомненно будет успех, но вопрос в том, что именно надо улучшать, что будет нужно людям? Предлагаю присоединится к обсуждению на форуме, чтобы более подробно раскрыть эти вопросы.
Кстати, не менее интересные вопросы для обсуждения в топике SEO, как всегда, одно из самых горячих мест на форуме :)
А где вы ищите ответы? Что удобней: форум или блог? (в плане поиска информации). Жду ваших комментариев :)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
среда, ноября 05, 2008
Новые возможности Google Analytics
Google Analytics похоже твердо решили ни коим образом не сдавать позиций перед и буквально на днях внедрили : создание пользовательских отчетов и просмотр статистики по различным сегментам.
Предлагаю для начала посмотреть видеоролик о том, как использовать и добавлять сегменты:
Остальные ролики доступны на официальном блоге Google Analytics, ссылка упомянута выше.
Все новинки российской розницы в одной ленте.
Уникальный контент для сайта от seo-копирайтера.
Сервис регистрации доменных имён.
Интересная заметка для вебмастеров: юзабилити комментариев.
Алексей Качаев: “Маркетинг в социальных сетях - тотальное заблуждение”.
Куда катится Интернет рынок и кто получит больше всего денег?
Нововведения будут очень кстати, в первую очередь, для тех, кто отслеживает определенные цели, показатели понверсии по продажам, отказы, клики и прочие must have отчетности.
Для рядового блоггера, пользовательские отчеты будут актуальны, например, для отслеживания кликов на рекламу (благо теперь Analytics дружит и с AdScense). Кроме того, можно сделать отчет страницы с прайсом рекламы на вашем блоге: число кликов на ссылку отправить заявку к числу заходов на страницу - вот вам и показатель конверсии.
Особенно интересно отслеживать, конечно же, источники траффика: поисковый, прямой, либо через рекламные кампании. Здесь целый рай для маркетолога :) Можно оценить эффективность того или иного слова для отдельного региона/страны, пошагово отслеживать переходы к целевым урлам, и потом сравнивать всю эту массу показателей одновременно.
Мое личное мнение, Google Analytics жизненно необходимый сервис не только в ИТ бизнесе, но и для любого рядового сайта, имеющим целью занять определенное место на рынке.
Уже попробовали на практике? Делитесь впечатлением :) От себя обещаю отдельный пост, посвященный созданию наиболее актуальных отчетностей.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
вторник, октября 28, 2008
Автоматическая нумерация с помощью CSS counter
Вольный перевод статьи . Автор:
Введение
Очень часто в различных документах нам приходиться использовать нумерацию, например, для оформления оглавления. Нумеровать можно и вручную, но такой способ доставит немало хлопот, если понадобиться удалить или добавить новый пункт. В CSS2.1 существует способ, который позволяет автоматизировать этот процесс - это использование CSS counters. Стоит уточнить, что CSS counters не поддерживаются браузером IE, однако в 8й версии это обещают исправить.
Нестандартные тексты, броские заголовки и душещипательные рассказы. Все это на .ру
- мероприятие ответственное, оно должно учитывать специфику самой компании, возрастные группы и социальные статусы приглашенных. Обратитесь к профессионалам!
- уникальная программа, позволяющая увеличить и сохранить высокий ratio на приватных торрентах
CSS counter шаг за шагом
Первым делом необходимо обнулить счетчик и дать ему название, используя свойство counter-reset:
body { counter-reset: section; } Таким образом, для элемента body счетчик имеет значение 0, а название счетчика - section. Название может быть любым, какое вы пожелаете. Свойство counter-reset может иметь также еще одно дополнительное значение, обозначающее, с какого числа начнется нумерация. Например, если вы хотите, чтобы нумерация начиналась с 5, то необходимо прописать следующее:
body { counter-reset: section 4; } Цифру 4 мы пишем потому, что счетчик всегда начинается с цифры на единицу больше установленной.
Следующий шаг - определение элемента, который будет нумероваться. Для этого используется свойство counter-increment:
body { counter-reset: section 4; } h2 { counter-increment: section; } Дополнительно, можно установить значение, на которое будет увеличиваться счетчик, например:
h2 { counter-increment: section 2; } Т.е. счетчик будет каждый раз увеличиваться не на 1, а на 2. (Пример: 5, 7, 9, 11 …)
Свойство также может принимать отрицательные значения и 0. Если счетчик устанавливается и инкриминируется (растет) в одном и том же элементе, тогда его значение будет постоянно сбрасываться. В следующем примере значение счетчика всегда будет равно 2м:
h2 { counter-reset: section; counter-increment: section; } Отображение счетчика
Как только все необходимые параметры для счетчика установлены, необходимо прописать правила для его отображения. Это можно сделать с помощью функции counter() и псевдо-класса before:
body { counter-reset: section 4; } h2 { counter-increment: section; } h2:before{ counter(section) " "; } Если вы используете один и тот же элемент ( как было в примере выше), тогда счетчик увеличится до момента отображения.
Взгляните на рабочий .
Сложная нумерация (2 счетчика и более)
Функция counter() может быть использована более 1 раза. В следующем примере я использую 2 счетчика для нумерации разделов и подразделов.
Счетчик для подразделов обнуляется для каждого нового раздела:
body { counter-reset: section; } h2 { counter-increment: section; counter-reset: sub-section; } h2:before h3:before{ content: counter(section) "." counter(sub-section) " "; } h3:before{ counter-increment: sub-section; } Использование вложенных счетчиков
Существует также функция counters() для вложенных счетчиков. Это хорошо подходит для работы с элементами списков (ol), где каждый список может иметь многоуровневую структуру. Но данный способ не будет работать для примера выше, .т.к. подразделы не вложены в элемент раздела.
Для вложенных счетчиков можно прописать следующие правила:
ol { counter-reset: section; list-style-type: none; } ol li { counter-increment: section; } ol li:before{ content: counters(section, ".") ". "; } Данный код будет увеличивать счетчик для каждого элемента списка, и не имеет значения насколько сложна структура списка. Но очень важно, чтобы счетчик сбрасывался в нужном месте, т.е. в начале каждого нового вложенного элемента. В нашем случаем, необходимо обнулять счетчик на каждом вложенном элементе ol.
В нашем примере первый вложенный список начинается с пункта 1.1, затем 1.2, 1.3 и так далее. Вложенный список третьего уровня начинается с t 1.1.1 и далее идут 1.1.2, 1.1.3 и т.д.
<ol> <li>item 1 <ol> <li>sub item 1 <ol> <li>sub-sub item 1</li> <li>sub-sub item 2</li> <li>sub-sub item 3</li> </ol> </li> <li>Sub item 2</li> </ol> </li> <li>item 2</li> </ol>
Взгляните на использования вложенных счетчиков.
Стилизация счетчика
Существует возможность задать стиль маркера для счетчика, передавая второй параметр в функциях counter() и counters(). Значения передаются те же, что и для свойства list-style-type. Хотя все они валидны, для счетчика имеет значение передавать только подмножества, а такие значения как disc, square и circle не изменятся, независимо от сложности структуры счетчика. Например, можно задать следующий стиль:
ol li:before{ counter(answer, lower-alpha) ") "; } Посмотрите , где функция counter используется для передачи параметра для стилизации счетчика.
Использование счетчиков для замены начального значения нумерованного списка
Если вам необходимо установить начальное значение для элемента ol, отличное от 1 и вы используете “strict” доктайп, то в процессе валидации, вы получите предупреждение о том, что такой код не валиден. Существуют доводы относительно того, является ли начальное значение настолько показательным, кроме того в текущей спецификации HTML5 о нем не заявлено . Даже если стартовое значение будет разрешено в HTML5, это не поможет в случае, когда страница имеет доктайп HTML4. Если вам необходимо, чтобы страница была валидна, используйте transitional доктайп или CSS counters.
Например, если вам нужно, чтобы счетчик начинался не с 1 по умолчанию, а с 4х, то используйте следующий код:
body { counter-reset: list-order 3; } ol li { counter-increment: list-order; list-style-type: none; } ol li:before{ content: counter(list-order) " "; } Важно также убрать маркеры, чтобы избежать двойной нумерации.
Посмотрите замены начального значения для нумерованного списка
Заключение
В приведенной статье, я рассказывал как обозначить и присвоить стили счетчикам в CSS, вместо добавления нумерации вручную. Это удобно, если вам необходимо пронумеровать разделы в статьях или оглавление. Использование приведенных примеров сэкономит массу времени на верстку таких структур. Кроме того, это более гибкий способ указать тип маркера в CSS, вместо того чтобы использовать дополнительные скрипты. Также я описал способ того, как переопределить стартовое значение для нумерованного списка. CSS counters очень просты в использовании, если разобраться, но подводным камнем здесь является отсутствие поддержки данной техники в браузере IE.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|