Меню на CSS
Дата: 15th Дек,2008 Автор:
Замечательная бесплатная коллекция кроссбраузерных и валидных меню — http://www.styledmenus.com/
Изменяем стандартный скролбар
Дата: 4th Дек,2008 Автор:
Замечательный jquery-плагин jScrollPane позволяет изменить стандартный скролл на любой любого вида.
Вот один из показательных примеров его работы: закос под различные ОС
Валидация Flash
Дата: 20th Ноя,2008 Автор:
Не секрет, что благодаря тегу «embed» ваша страница не будет проходить валидацию. Знающие люди, конечно, его не используют, но абсолютное большинство, в том числе и рекламодатели со своими баннерами как раз им и злоупотребляют.
Что же делать, когда не хочется «портить» свою страничку чужим кодом? Как отвалидировать? Все очень просто. К примеру, у нас есть код:
1 2 3 4 | <object width="468" height="60"> <param name="movie" value="/flash/banner.swf"> <embed src="/flash/banner.swf" width="468" height="60"></embed> </object> |
Он не проходит валидацию, но, легким движением руки мы превращаем его в «хороший» код:
1 2 3 | <object type="application/x-shockwave-flash" data="/flash/banner.swf" width="468" height="60"> <param name="movie" value="/flash/banner.swf" /> </object> |
В <object> дописываем параметр «data», которому присваиваем адрес к флеш. Также надо указать type=”application/x-shockwave-flash”. Вот и все. Все остальные параметры, если такие будут у вашего «embed», дописываем в «param».
Подробнее почитать можно:
http://alistapart.com/articles/flashsatay (англ)
В русскоязычных источниках встречается ошибка. Они вместо параметра «data» зачем-то указывают «src». В частности, это было замечено по этой ссылке: http://www.reactant.ru/blog/validatsiya-flash.html
Все, теперь мы получили валидный код, который работает во всех браузерах.
Делаете ли вы эти основные 10 ошибок CSS?
Дата: 12th Ноя,2008 Автор:
1. Игнорирование совместимости браузеров.
Это, возможно, проблема номер один для веб-разработчиков. Ведь сейчас браузеров развелось огромное количество и нельзя с увереностью сказать, что сделанный вами сайт не будет просматриваться каким-то экзотическим софтом. Вернее, наоборот, ваш сайт обязательно будет открыт в куче различных инет-обозревателях. Конечно, на их все ориентироваться при разработке не стоит, но обязательно стоит уделять внимание IE6, IE7, FireFox >2, Google Chrome, Safari и при возможности Opera. Также, рекомендуется перед релизом проекта обязательно просмотреть его через Browsershots и оценить внешний вид по скриншотам в различных версиях браузеров.
2. Не учитывается маленькое разрешение экрана
Конечно, в наш век, когда космические корабли бороздят просторы Вселенной, а на столе у каждого веб-разработчика стоит хороший монитор в 17, 19, ато и больше дюймов, не следует забывать, что много народа сидит на разрешении экрана 800*600. Тем более с появлением различного рода устройств, позволяющих серфить инет, но не имеющим надобности поддерживать большое расширение эта проблема становится особенно актуальной. Сделайте всех посетителей вашего сайта счастливыми.
3. Не использование фреймверков
Если вы пишите каждый раз код с нуля, то должны задаться таким вопросом: “Почему?” Существует куча фреймверков CSS, так что есть из чего выбрать и потом применить.
Зачем каждый раз изобретать колесо?
4. Используйте общие классы
Существует, пусть и небольшое, множество классов, которые используются фактически на всех проектах.
К примеру, это могут быть:
1 2 3 4 | .right {float:righ} .clear{clear:both} .left{float:left} /* и т.д. */ |
Зачем каждый раз придумывать им новые имена или заново переписывать? Вынесите их, к примеру, в отдельный файл, а потом юзайте посредством копипаста в других проектах.
5. Не валидный HTML
Уверен, вы не знали что валидация вашего HTML может повлиять на CSS. В самом начале перед проверкой на валидность CSS обязательно отвалидируйте ваш HTML код. Примеров когда невалидный HTML тянет за собой CSS очень много. Допустим, мы не закрыли DIV и получили неправильный CSS класс — это может быть все что угодно. Всегда проверяйте CSS только после того, как довели до ума HTML.
6. Не валидный CSS
Очень часто причина в том, что хаки под различные “ослы” пишутся в одном файле. Выносите их в отдельный файл и подключате при помощи условных комментариев.
7. Использование “жирных” фоновых изображений
Не забывайте про repeat в свойстве background. Иногда можно просто вырезать полоску и размножить ее в нужном направлении — и мы получим нужный фон. Также не забывайте использовать фоновый цвет — иногда он может помочь сэкономить десятки килобайт.
8. Использование CSS везде и всегда
CSS нужен для того, чтобы облегчить работу разработчика и по возможности ее ускорить. Иногда можно и нужно использовать таблицы, от которых уже почти все отказались, но…
9. Использование инлайнового CSS
Это зло встречается очень часто. Стили всегда должны быть вынесены в CSS. Знаю, очень часто хочеться прописать “style=” и понеслась, особенно если надо изменить какой-то один параметр изображения, но не надо. Пересильте себя и создайте еще один класс.
Например, вместо
1 | <a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a> |
можно написать
1 | <a href="somewhere.html" class="link_style">link</a> |
а стили вынести в CSS. Согласитесь, выглядит красивее, да и вдруг чего — легко можно все поменять.
10 . Подключаем слишком много файлов
Приходилось ли вам видеть сайт с 12-ю подключаемыми CSS-файлами? Это кошмар для того, кому надо будет что-то когда-то подправить в этом проекте. Используйте один, ну максимум 2-3 файлов.
Вольный перевод: Are You Making These 10 CSS Mistakes?
