Чем дальше уходит в прошлое ie6, тем охотней я пользуюсь примочками css, доступными современным браузерам. Одна из таких возможностей — селекторы атрибута (attribute selectors), или селекторы по атрибутам.

Примечание: IE7 и 8 понимают селекторы атрибута только в том случае, когда у страницы указан правильный доктайп. В противном случае они утрачивают понятливость.

Между значением селектора и квадратным скобками не должно быть пробелов! Значение атрибута рекомендуется заключать в кавычки.

Селекторы атрибутом можно комбинировать друг с другом и другими селекторами:

input[type="text"]

— выбраны элементы input типа text (текстовые поля)

input[type="text"].error

— выбраны текстовые поля с классом error

td input[type="text"]

—выбраны текстовые поля, заключённые в табличные ячейки

input[type="button"][onclick]

— выбраны элементы input типа button (кнопка), на который повешено событие onclick

Селекторы существования, равенства, с пробелом и с дефисом определены в стандарте CSS2.1. Селекторы префикса, суффикса и подстроки определены в стандарте CSS3.

О том, как можно использовать селекторы атрибутов на практике, расскажу в следующий раз.

Сразу оговорюсь, что всё нижесказанное — сугубо личное мнение из сугубо личного опыта. Кому-то, может быть, удобней иначе.

По мере ухода со сцены IE6 появляется возможность использовать продвинутые свойства css. Position:fixed — из их числа. Фиксированное позиционирование отличается от других видов позиционирования тем, что прилепляет позиционированный блок к видимой части страницы (визуально — к окну браузера). То есть, при пролистывании страницы блок с этим свойством всегда остаётся видимым.

Казалось бы, очень интересное свойство, но на его применение нашлись ограничения: Читать полностью »

Яндексовская «Помощь вебмастеру» сильно меня озадачила. Читаю главу под названием «Почему в разделе «Внешние ссылки» отображаются не все ссылки!» (https://yandex.ru/support/webmaster/site-indexing/links-to-website.html#missing-links) и вижу такое:

Причины, по которым некоторые ссылки могут не показываться:

• …
• ссылка является ссылкой с изображения (пункт 3 сверху)

Я подвисла. В моём понимании, ссылка с изображения — это конструкция вида:

<a href="куда-то">
<img src="какой-то" alt=""/>
</a>

Сие должно бы означать, что ссылка, в теле которой вместо текста помещена картинка, не учитывается Яндексом. Это все кнопки, все баннеры должны были бы утратить вес. Но этого, вроде бы, не наблюдается.

Однако человек, поднаторевший в расшифровке «что имел в виду заказчик», сказал, что «ссылка с изображения» — это ссылка, нарисованная на картинке. И тут я повисла снова, потому что моя русская языка такое толкование принять не способна. Но по фактам реально наблюдаемая картина соответствует именно этому толкованию. Кто бы мне объяснил, как это всё понимать!

Два самых надёжных и испытанных мной метода

Уважаемые владельцы блогов на Wordpress! Если вы ещё не столкнулись со спамом в комментариях, значит, вас пока просто не заметили. И обязательно заметят и заспамят, если только вы не будете прятать свой блог от людей. Но, скорее всего, вы с этой напастью уже знакомы. Так что хотите мирной жизни — готовьтесь к войне. И готовьте оружие/средства защиты, потому что WordPress своими средствами со спамом не справляется. И помните, что в борьбе со спамом необходимо не только отбить спамеров, но и сохранить живых пользователей живыми.

Итак, что мы имеем?

• К сожалению, такие популярные методы как капча или поголовная регистрация безупречно отсекают спам, но создают проблемы живым людям, так что эти способы надёжны, но дают болезненный побочный эффект.
• То же самое можно сказать про премодерацию, ибо при большом количестве посетителей она изнурительна для хозяина блога.
• Средства, подобные Aksimet, не отсеивают начинающих спамеров.
• Удаление поля «Url» из формы комментирования вообще бесполезно, потому что большинство ботов не обращаются к странице комментирования, так что спамеров вы будете отличать по наличию заполненного поля «Url».
• Использование «nofollow» спамеров не отпугивает, так же как и грозные предупреждения: боты неграмотны и просто их не замечают.

В общем, куда ни кинь, везде клин, то есть, либо проблема не решается, либо взамен появляются другие.

Однако два с лишним года назад я нашла способ, отлично отсекающий спамеров без ущерба как для пользователей, так и для меня лично. Читать полностью »

С месяц назад я собралась с духом и решилась прицепить на свой блог кнопки социальных сервисов. Методику честно заимствовала здесь: Shakin.ru (преимущество метода в том, что блог не нагружается лишними плагинами). Ничего хитрого, кнопки ставятся легко, остаётся лишь чуть-чуть подогнать их положение стилями css. Казалось, для полного счастья недостаёт лишь нарисовать собственные уникальные кнопки. Но, как и следовало ожидать, быстро выяснилось, что схема нуждается в мелком допиливании под мой конкретный случай.

После лёгкой косметической притирки выяснилось, что посты с длинными заголовками неудобно добавлять в Твиттер: длина сообщения превышает допустимую. А сообщение состоит из моего имени в Твиттере, названия заметки и ссылки на неё. Причина «недомогания» — длинные названия и длинные ЧПУ, построенные из названий.

Кстати, на сайте автора методики эта проблема тоже присутствует, но ему, видимо, это не мешает. А мне помешало.

Можно, конечно, сокращать названия, но как быть с теми постами, которые написаны и проиндексены поисковиками давно? Принести в жертву? А если не приносить? Читать полностью »

Оно наконец состоялось. Выпавшие каникулы я посвятила редизайну блога, каковой (редизайн) можно наблюдать в действии: минималистичный дизайн в три колонки, резиновая комбинированная вёрстка (предпочитаемая мной техника).

И ещё одно обновление — новая страничка для «Медвежонка»: про сайты по фен-шую, и не только. Всего лишь шестая, кому мало, а кому много. Напомню, что изначально сайт создавался для конкурса в ЦКО «Специалист» и имел всего одну страницу (что не помешало ему взять первое место).

Апдейт к оформлению кнопок.

Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: input. Чтобы отличить текстовые поля от кнопок, а также флажков (чекбоксов) и переключателей (радиобаттонов), приходится снабжать их классами или придумывать обёртки (а при такой возможности проще использовать обычный графический <input type="image" />).

Однако по мере ухода со сцены IE6 появилась возможность обойтись без этих ухищрений. Теперь проблему решает селектор атрибута (иначе — селектор по атрибуту). Выглядит он так:

input[type="submit"]{
…
}

Теперь оформление кнопки (на том же примере, что и в прошлый раз) будет выглядеть так:

<form action="">
<fieldset>
<legend>Пример кнопки
<input type="text"/>
<input type="submit" value="Отправить" />
</fieldset>
</form>

<style type="text/css">
  input[type="submit"]{
   width:30px;/*Ширина картинки*/
   height:21px;/*Высота картинки*/
   padding:0 0 0 30px;
   /*Выталкивает надпись с картинки в ИЕ*/
   overflow:hidden;
   /*Обрезает кнопку до указанных размеров*/
   cursor:pointer;
   border:none;
   background:url('button.gif') no-repeat;
   /*Положить картинку фоном*/
   color:transparent;
   /*Надпись на кнопке прозрачна в ФФ и Опере*/
  }
fieldset{
   padding:50px;
   border:2px solid #3a5777;
  }
</style>

И вот результат: Пример. Не работает в IE6, но понимается современными браузерами.