Проблемы с валидацией CSS в адаптивной верстке
49 повідомлень
#12 років тому
Цитата ("Hungry_Hunter"):Это значит что верстка должна быть логичной, блоки должны быть на своих местах, иметь правильные названия классов, правильную расстановку тегов и заключение контента в правильные контейнеры, а также работа сайта с отключенными стилями и яваскриптом, что бы он не расползялся внепонятное пятно а была понятна его структура.
Погуглите, почитайте, посмотрите примеры
А так вот она какая семантичность, а я за близкое к ООП кубаторю).
А как правильней классы называть , например ,по 5му( по вложенности) или по переменным?
А с css как быть, по алфавиту или по 5му( по вложенности), ведь к нему стремимся, да и обозначить можно, что знаком?)
А в css через запятую, для главного, и для каждого в отдельности семантично, ведь это не по алфавиту, и не по вложенности?
11416 повідомлень
#12 років тому
У каждого свои требования к верстке. У меня свои и я считаю их правильными. Если интересно, выкладываю ниже)КРОССБРАУЗЕРНОСТЬ ВАЛИДНОСТЬ СЕМАНТИКА
1. По умолчанию сайт должен нормально работать в IE7+, FF13+, Opera11+, Safari4+, Chrome, Safari MacOS, Ipad
2. Если поддержка IE7 не требуется об этом будет специально сказано
3. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или "так получается короче"
4. Вид сверстанной страницы должен максимально соответствовать дизайну, но конечно в пределах разумного, попиксельная точность не требуется.
5. Ну и конечно соблюдать семантику.
6. Обязательно использование <!DOCTYPE html> и html5 тегов header, nav, section, footer итд.
7. Для IE подключать посилання
8. Если требуется, подключить для IE pie.htc
9. Для стилей достаточно одного файла style.css (за редким исключением) Не нужно городить кучу файлов с исключениями типа ie7.css, ie.css итд.
РАЗМЕТКА БЛОКОВ
CSS файл должен быть разбит по любому из следующих способов на выбор верстальщика:
1) на логические части по функциональному назначению, например:
/* ___________Сброс CSS____________________*/
/* ___________Типовые элементы____________*/
/* _______________Залоговки______________*/
/* _______________Ссылки________________*/
/* _______________Элементы форм_________*/
/*___________HEADER_________________*/
/*___________SIDEBAR_______________*/
/*___________FOOTER_______________*/
либо
2) В алфавитном порядке.
СТРУКТУРА
1. В корне находятся все html файлы, Папка css с файлами стилей, папка js с файлами JavaScript, папка images с изображениями, папка fonts со шрифтами.
НАЗВАНИЯ
1. Названия всех файлов, классов, id итд необходимо писать в нижнем регистре.
2. Названия классов и id должны иметь английские названия,и по смыслу соответствовать применению. например: header, menu, footer, news. Не допускается использования бессмысленных названий и транслита вроде .shapka или .verh
КОДИРОВКА
1. Кодировка html-макета, CSS и JS файлов должна быть UTF-8 без BOM.
ПРИМЕЧАНИЯ ПО ВЕРСТКЕ
1. Всегда описывайте цвет фона для body (даже если он белый) и размер и цвет для текста, если даже он дефолтный.
2. Если можно обойтись без использования id, то лучше обойтись без них. Оставим id программистам. Используйте их по назначению в тех местах где это необходимо, например для использования в js скриптах.
3. Если используете CSS хаки, комментируйте, что это и для какого браузера.
4. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
5. Все стили должны быть „убраны” в CSS, даже если стиль иммет всего одно свойство.
6. Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px.
7. В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки.
8. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space: nowrap.
9. Не забывайте прописывать cursor: pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>.
10. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript: void (0)' вместо популярного href='#', чтобы страница не скроллилась вверх.
11. Верстайте формы правильно: метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for.
12. Если в макете используются нестандартные шрифты, их стоит реализовать с помощью font-face, если не оговорено иное (sIfr, Cufon, картинки)
13. Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту.
14. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.
15. Для пунктов меню необходимо показать, как выглядят пункты меню обычные, при наведении и в активном состоянии.
16. Все меню и списки стоит делать с помощью тегов <ul> и <li> причем внутри <li> недопустимо использование классов и id, за исключением редких случаев когда без этого обойтись невозможно и в случае с активной страницей.
<ul class = "“ id = "">
<li><a href=""> Текст</a></li>
<li class="current">Текст</li> (либо <li><span>Текст</span></li> либо еще как-то)
</ul>
17. При вставке изображений использовать относительные пути, указывать собственные размеры, что бы добавление большей чем нужно картинки не повлияло на общий вид.
18. Код должен иметь удобное форматирование с отступами.
19. По умолчанию границы для изображений, являющихся ссылками отсутствуют.
20. Заголовок страницы в области контента должен быть оформлен с помощью тега <h1>
21. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).
22. Для ссылок стоит испольpовать outline: none для удаления рамки, возникающей при клике в IE.
ГРАФИКА
1. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
2. Графика должна быть качественной и выглядеть красиво, то есть сохранять ее надо например jpg в 80–100% качестве… При сжатии не должно возникать видимых дефектов характерных данному формату.
JAVASCRIPT
1. Все что можно сделать без Javascript, делать без него.
2. Javascript код обязательно нужно выносить в отдельный (е) файл (ы).
3. Если не оговорено отдельно какие Javascript библиотеки требуется использовать при верстке макета, то используем jQuery последней версии.
4. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т.к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS
РАЗНОЕ
1. Если в верстку вносятся правки во время интеграции верстки в CMS, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в верстке примерно такого содержания:
Добавил новые картинки в папку img,
Картинки btnhome.jpg и btnfeedback.jpg уже не нужны, можно удалять
Изменил html-код в секции файла anketa.html строки 12-20
Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).
либо вносить правки на сервере с проектом через FTP
2. Если в макете имеется контент, то его надо перенести в верстку без использования каких-либо заглушек в виде Lorem ipsum
1807 повідомлень
#12 років тому
Валидный css- миф.....есть костыли под осликов, есть свойства css3, не проходящие валидацию, и т п....не занимайтесь ерундойЦитата ("Hungry_Hunter"):
НАЗВАНИЯ
1. Названия всех файлов, классов, id итд необходимо писать в нижнем регистре.
2. Названия классов и id должны иметь английские названия,и по смыслу соответствовать применению. например: header, menu, footer, news. Не допускается использования бессмысленных названий и транслита вроде .shapka или .verh
Готов убивать за использование ID в верстке (если точнее, за привязку css-свойств к айдишникам).
Цитата ("Hungry_Hunter"):
2. Если можно обойтись без использования id, то лучше обойтись без них. Оставим id программистам. Используйте их по назначению в тех местах где это необходимо, например для использования в js скриптах.
если речь идет о верстке, то ВСЕГДА можно обойтись без айдишников. Нету такого случая, чтобы без них нельзя было что-то сверстать.
А так текст отличный.