Bassline

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

Вот так попробуй: @media only screen and (max-width : 959px),only screen and (max-device-width : 767px) { .page { width: 760px; }}

Тогда почему почему они реагируют на него? Если убрать все клики, весь js и оставить только один css hover, то при тапе сработают стили повешенные на ховер.

Допустим есть некая форма со списком услуг. При наведение пункт списка меняет цвет. При клике цвет фиксируется, т.е. добаляется класс с помощью js, при повторном клике класс удаляется и соответственно цвет меняется. Но на тач устройствах hover воспринимается как клик, и в результате выделение не снимается после повторного клика. Пробовал заменить css hover на js, и при клике насильно удалять класс, который вешается при наведении. Помогло, но не во всех браузерах, например в 4 айфоне 13-ый яндекс браузер и какая-то сафари не повелись на этот трюк, и упорно цепляются за hover. Какие есть еще варианты?

Молодец. Осталось сшить костюм супергероя.

Занимаюсь изучением javascript путем изобретения детских велосипедов. Решил написать функции, которые ищут, добавляют и удаляют классы у тэгов. Регулярные выражение пока не осилил, поэтому обходился циклами и массивами. Подскажите, как можно оптимизировать, сократить или ускорить этот код? http://jsfiddle.net/UZ3DQ/ window.onload = function(){ classRemove('добавитьКласс', 'найтиПоКлассу', 'найтиПоТэгу'); classAdd('удалитьКласс', 'найтиПоКлассу', 'найтиПоТэгу'); function classAdd(desiredClass, searchClass, searchTags) { var pointElements = searchElements(searchClass, searchTags); outer: for (var i = 0; i < pointElements.length; i++) { var classWords = pointElements[i].className.split(' '); var classString = ''; for (var j = 0; j < classWords.length; j++) { if (classWords[j] == '') { classWords.splice(j, 1); j--; }; }; for (var k = 0; k < classWords.length; k++) { if (classWords[k] == desiredClass) { break outer; }; }; classWords.push(desiredClass); classString = classWords.join(' '); pointElements[i].className = classString; } } function classRemove(desiredClass, searchClass, searchTags) { var pointElements = searchElements(searchClass, searchTags); for (var i = 0; i < pointElements.length; i++) { var classWords = pointElements[i].className.split(' '); var classString = ''; for (var j = 0; j < classWords.length; j++) { if (classWords[j] == desiredClass || classWords[j] == '') { classWords.splice(j, 1); j--; }; }; classString = classWords.join(' '); pointElements[i].className = classString; } } function searchElements(desiredClass, desiredTag) { var allTags = document.body.getElementsByTagName(desiredTag); var rightTags = []; var classWords = []; for (var i = 0; i < allTags.length; i++) { classWords = allTags[i].className.split(' '); for (var j = 0; j < classWords.length; j++) { if (classWords[j] == desiredClass) { rightTags.push(allTags[i]); break; }; }; }; return rightTags; };}

По блокам. Например, если шапка не сильно навороченная, то сначала полностью верстаю ее в html со всеми классами и содержимым, потом копирую с помощью множественного выделения все классы в css файлы и стилизую. И так всю страницу.

Это новая технология, называется Smart Rendering. Браузер сам отформатировал таблицу, поделив ее на секции для лучшей читаемости.

Даже если осилишь установку, начнется второй раунд - установка видеодрайверов. Ее я так и не осилил, по крайней мере для nvidia, единого центра драйверов как в ubuntu там нет. И это еще не все, там с правами и консольными командами какая-то фигня. Не представляю как можно работать на 13 дюймах. По работе пришлось пересесть с 24 на 15 - производительность резко упала. На большом мониторе можно на одну половину экрана открыть браузер, а на другую редактор кода, и постоянно видеть результат по ходу верстки не делая ни одного лишнего движения. А если есть еще второй монитор для фотошопа...

Я обычно делаю отдельный блок и вешаю на него модификатор: <div class="block"> <h2 class="header header_block">Заголовок блока</h2> <div class="block__content"> Содержимое блока </div></div><div class="block2"> <h2 class="header header_block2">Заголовок блока</h2> <div class="block2__content"> Содержимое блока </div></div>и т.д.

При такой раскладке искажения минимальны, попытаюсь протолкнуть этот вариант. Спасибо.

Да никто не лепит, я и отдельными картинками тоже пробовал. Просто в местах стыков образуются пустые промежутки в 1-2px. Или браузер искажает саму картинку чуть-чуть, в результате, например, левая граница чуть толще (размытее), чем верхняя. Хотя при 100% все выглядит идеально.

При масштабе 75% А если у блока тонкие светлые границы с темными тенями, светлым полупрозрачным фоном - эти смещения становятся еще заметнее. Вообще не катит. Это не я придумал, этого от меня требуют. Менеджеры проверяют каждый пиксель, на каждом возможном уровне увеличения и уменьшения масштаба.

1) border-radius 2) box-shadow 3) background-color: rgba() (для IE<9 выкручиваемся через полупрозрачный png 1*1, можно запилить в виде base64, png изначально будет весить 109 байт, через smush.it будет 70 байт, base64 уже чуть-чуть увеличит размер) 4) да 6) да 5) CSS3PIE Ну елки-палки. Я же писал, что уже использовал pie, а значит и border-radius, и box-shadow и т.д. Но в IE7-8 при добавлении тени не работает прозрачность, точнее она есть, но от нее нет толку, поскольку тень реализуется путем сплошной подложки в под основной блок, и сквозь блок видно мутное пятно тени. А нужно чтобы была и тень и прозрачность в IE7-8. Сначала нужно попробовать этот способ, а потом советовать. Блин.

Полупрозрачность не только у фона, но и у рамки, и у тени. Таким макаром не получится, наложения и пересечения картинок будут видны. Совсем уже читать разучились. Ну и вдогонку. При уменьшении масштаба в хроме на 25% нижня рамка смещается и видно как торчат углы. - - - - Хотя нет, таким макаром получается все нормально, но при масштабировании в хроме вылазят баги. Как я писал выше, я пробовал картинками, но другим способом попроще и тоже все отображается нормально. Но при масшатабировании... Все равно желательно читать тему внимательно, перед тем как ответить.

Реально ли сверстать некий прямоугольный блок с текстом, удовлетворяющий следующим требованиям: 1. Закругленные углы 2. Тень со всех сторон 3. Полупрозрачность фона (что бы было видно все, что находится за блоком) 4. Резиновость хотя бы по высоте. 6. Корректное отображение при масштабировании страницы (через ctrl) как в + так и в - 5. Поддержка всех этих пунктов без исключения начиная с IE7+ Такой блок мне нужно сверстать независимо от того, возможно это или нет. Этого требуют от меня на работе. Пробовал вариант с прозрачными картинками, все вроде хорошо, но при масшабировании в хроме появляются артефакты в виде смещения в разные стороны бэкграундов на пару-тройку пикселей, врезультате чего блок карежится. В IE8 такая же ерунда. Неприемлимо. Вариант с pie.htc и фильтрами для IE7-8 тоже не катит, так как все они реализуют тень в виде темной подложки под основным блоком, в результате через полупрозрачный фон видно только эту тень. Может есть какое-либо чудо-средство?

У меня было что-то в этом роде. После смены версии библиотеки с 1.8.2 на 1.8.3 проблема исчезла. Может в версии дело?

Может быть кто-нибудь имел дело с этим слайдером http://bxslider.com/ Проблема в том, что иногда он не срабатывает, например, если закрыть и открыть браузер, потом загрузить страницу. Стоит обновить страницу - все работает. Этот глюк бывает не всегда. И только на реальном сервере, на локальном проблемы нет. Вызываю слайдер функцией, как указано на сайте: $(document).ready(function() { $('.slider').bxSlider({ pager: false });}); Если посмотреть код через firebug во время этого глюка, то видно, что js не добавил в код новые теги и стили, с помощью которых этот слайдер работает, в результате чего браузер вывел картинки все сразу как они есть в коде.

Но ведь делая сайт таким, ты переутяжеляешь его для основной аудитории - 80% нормальных современных браузеров. Получается плодишь лишние слои (никаких псевдослоев), как реализуешь закругленности ? Через Pie или разрезанием картинки? Я же не фрилансер, у меня нет выбора, нужно радоваться, что под IE6 не потребовали. Все делается через картинки и лишние теги. Нужно набираться опыта и стажа любой ценой.

IE7 и выше, причем должно отображаться везде одинаково. И на десерт Опера 10 и выше.

Да, что-то я стормозил, совсем забыл что использовал везде span'ы.

Спасибо за решение. Нашел еще похожий способ http://habrahabr.ru/post/71236/ - здесь не нужно использовать зум и инлайн для ie7. А я просто добавил вспомогательному блоку display: inline-block; width: 0; overflow: hidden; vertical-align: middle; - вроде работает везде без всяких хаков.

Пытаюсь сделать вот такое меню http://jsfiddle.net/j7cQW/6/ Суть в том, что текст в каждом пункте меню должен автоматически выравниваться вертикально по середине, независимо от того, одна там строчка или две, то есть сегодня там одна строчка, завтра их может стать две. Плюс, это все обязательно должно быть кроссбраузерным начиная с IE7+. Мой пример работает только в современных браузерах. Уже всю голову сломал. Возможно проблема решается элементарно, но я не вижу хоть убей.

Благодаря этим плагинам и прочим плюшкам яндекс браузер стал намного удобнее самого хрома. Но я им не пользуюсь, так как не люблю сам яндекс, так же как и гугл, поэтому пользуюсь фоксом. А каких-то различий в отображении ниразу не встречал.