Leaderboard

Мой вольный перевод статьи Луи Лазариса. Возможно тем, кто регулярно перечитывает спецификации, эта тема уже давно знакома, но я впервые вижу (кроме text-overflow) эти свойства. Поэтому, думаю, статья заинтересует и большинство других. Примерно полтора года назад я писал о свойстве word-wrap. В статье говорилось том, что это новое свойство, которое есть в CSS3 и отсутствует в CSS 2.1, и что оно поддерживается почти всеми браузерами, включая старые IE. Ну что ж, теперь все изменилось. Я это заметил, пока проводил исследования для своего сайта CSS3 Click Chart. Свойство word-wrap было удалено из спецификации CSS3, а вместо него туда добавили другие схожие свойства. Text-Wrap Свойство text-wrap "определяет режим обтекания текстом". Ну что ж, это описание нам мало о чем говорит, так что давайте присмотримся внимательней к параметрам свойства. normal Параметр по умолчанию для text-wrap. Это то, что мы видим когда не заданы никакие параметры обтекания текста. Обычный элемент с текстом внутри. none Браузеру сообщают, что текст в этом элементе не должен переноситься вообще. Так что если текст достигает конца родительского контейнера, он будет его переполнять и любые overflow-настройки будут обрабатывать видимость текста. avoid Это значение будет по прежнему разрешать разрывы строки, но оно "говорит" браузеру, чтобы тот был избирательным в том, где случаются разрывы. Прекрасный пример приведен в спецификации в данном разделе, который в основном показывает, что браузер будет интерпретировать части разметки, чтобы решить, где можно и где нельзя её разрывать. Поддержка браузеров: пока нет. Overflow-Wrap Свойство overflow-wrap сейчас пришло на замену устаревшего word-wrap. Его параметрами являются значения "normal" или "break-word" - те же значения, что были у word-wrap. Это свойство, как и его предок, вызывает, как это называет спецификация, "вынужденную обёртку". Спецификация объясняет: "Это свойство определяет будет ли перенос осуществляться внутри слова, чтоб предотвратить переполнение, когда строка слишком длинная и не помещается внутри строчного элемента." Спецификация также поясняет, что если text-wrap принимает значение "none", то свойство overflow-wrap не будет иметь никакого эффекта. Кроме того, слово не будет иметь переноса. Подробнее о переносах далее. Поддержка браузеров: пока нет. Line-Break и Word-Break Согласно спецификации, эти два свойства были введены для того, чтобы помочь справиться с проблемами, которые возникают у браузеров при при условии, что строки и слова нужно разбить так, как это принято в английском языке. Например, в английском браузер не будет ломать слово в строке в каком-нибудь другом месте, кроме как в том, где есть пробел либо некоторые знаки препинания. Но в других языках эти правила пока не применяются. Как говорится в спецификации: "Хотя в английском и можно переносить строки в местах пробелов либо знаков препинания, но не все языки имеют пробелы и знаки препинания." В этих системах письменности "возможность разрыва строки основана на границах символа, а не слова". Таким образом от разрыва строк приходится отказываться в определенных комбинациях символов. Если честно, я не совсем понимаю все значения этих свойств, поэтому я не буду описывать их, дабы не вводить в заблуждение. Поддержка браузерами: пока нет. Text-Overflow Свойство text-overflow определяет, как обрабатывать текст, который выходит за пределы родителя, когда для родителя задано какое-то иное значение переполнения, отличное от overflow: visible. Оно принимает следующие значения: clip С этим значением (по умолчанию)текст будет обрезан и его часть будет невидимой. Сейчас это происходит по умолчанию во всех браузерах. Имейте ввиду, чтобы правило работало - текст должен быть внутри элемента, который по той или иной причине не разрешает естественный разрыв строки. ellipsis При таком значении текст будет тоже обрезаться, но тот факт, что этот текст неполный, будет обозначаться многоточием ("...") Как показано ниже, многие браузеры поддерживают это свойство. Старые версии IE включали в себя его поддержку, но, судя по всему, реализация изменилась, поэтому новые IE используют префиксы. Более подробную информацию об этом, а так же живые примеры, можно увидеть здесь. Поддержка браузерами: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+ Hyphens И наконец-то, CSS3 представило новое свойство hyphens, которое используется для того, чтобы указать браузеру, вставлять автоматически дефис или нет. none Это значение "говорит" браузеру никогда не расставлять переносы, даже если определены точки разрыва. manual Это значение по умолчанию. Браузер не будет вставлять перенос, пока не увидит символ переноса. На самом деле вы можете сами задать дефис с помощью символа "мягких переносов" (soft hyphenation character), который внутри слова выглядит как hy­phens. auto При этом значении браузер будет автоматически вставлять разрывы слов и переносы, в соответствии с языком, определенным для текущей страницы. Пример. Поддержка браузерами: IE10+, Firefox 6+ (обоим нужны вендорные префиксы) Заключение Хотя браузеры и не особо пока поддерживают эти новые фишки, приятно знать, что в будущем мы будем иметь в своем распоряжении несколько мощных инструментов для более тонкой обработки разрывов строк и переполнений. P.S.если честно я до сих пор не осознал в полной мере свойство hyphens. Поэтому могут быть ошибки в переводе.

Фух, там нашелся человек, который лучше выражает мои мысли, чем я сам) Только я не считаю, что нужно обязательно искать альтернативу, мне JavaScript многим импонирует, его просто нужно развивать. P/s касательно ссылки на хабр

Максим, я бы на твоем месте оооочень поостерегся связываться с гражданином paracelso на предмет дизайна. Достаточно вот на это взглянуть, чтобы все понять - http://forum.htmlbook.ru/index.php?showtopic=29186&st=20&p=222281entry222281 P.S. Пришли мне ТЗ или просто опиши на словах в ПМ что хочешь видеть.

Упс, не заметил в начале... ....., ..... и ..... в ..... .....! Я думал, со времен "вывернутой наизнанку" боксовой модели W3C наконец повзрослели и вылечились от синдрома отмораживания ушей назло маме дяде Билли. И нате вам о5 25... По-моему "оборачивать-слово" куда лучше отражает смысл "разрывать длинные слова, чтоб они влезли в ширину, или нет", чем "оборачивать-переполнение" (второе лично у меня вообще с переполнением по вертикали ассоциируется). Да и писать меньше. Ну нафига, нафига менять шило (которое, к тому же давно работает) на какое-то невнятное мыло?.. Эх, Элика (fantasai)... нет на тебя батюшки из того анекдота

На хабре тоже появилась статься с анализом поведения js.

Hyphens — это авторасстановка переносов, как в ворде. Недавно на хабре как раз была статья с примерами. Насколько я понял, none означает "не делать переносов никогда", manual — только если в слове явно стоит ­ (в принципе, как всегда было раньше), auto — делать переносы самому везде, где получается, по встроенному алгоритму для текущего языка (заданного атрибутом lang или по дефолту).

Чет смущает меня этот релейтив. В ие6 какраз таки баги могут быть из-за релейтива на элементе без hasLayout

Можно делать и с overflow, но у вас тень-то зависит от скругления обертки и это отчетливо видно на рисунке.

Насколько видно из рисунка вы сделали так: взяли большой блок и скруглили его, наложили ему тень, а нижний блок положили просто поверх него. В результате получилось, что скругления верхнего блока не совпадают со скруглениями нижнего. Свойство border-radius позволяет скруглять каждый угол по отдельности, поэтому делайте общий контейнер, скругляйте нужные углы и накладывайте тень уже на него. Примерно так.

Правильно писать rgba, а не rgb. Все работает. Кроме того уже можно не использовать префиксы для border-radius. Большинство современных браузеров понимают это свойство без них. А если уж и используете, то ставьте его по коду ниже, т.е. после префиксов.

Показывайте код.

УГ такое же как уг выше. Смотреть прайс начиная с левого конца монитора и заканчивая через 40+ см с максимальным разрешением, даже 1 строчку не прочел. Должен быть предел, даже Артемий со своей резиной дает рамки. Почему нажимая на меню я не куда не попадаю. ( тыкал меню а не под меню, может я и пойму в чем *** тут, а заказчик испугается и убежит). Ваши контактные данные ярче, как будто вы от кого то скрываетесь. Уберите с главной текст - Главная стр. , и к картинкам нужен текст, вы когда хотите купить какую то вещь, запакованную и видите только картинку, а в нашем случаи иконку. Неужели нету желания хоть что то подробней прочитать про нее? Не ища эту информацию на других страницах? И так, мы решили нажать на калькулятор. Прошу прощения но это одно из самых моих любимых, где можно разводить столько холивара... ;P Выбираем - Сайт визитка. И уже определенная сумма. Но я так и не понимаю, что сейчас в эту сумму входит. Смотрю дополнительные функции. Опачки, что бы на сайте визитке была форма обратной связи, т.е. одна из главных функция сайта визитки, я должен доп. заплатить. Тоже самое с Почтовая рассылка и RSS.. и т.д. + не указаны цены на эти доп. услуги, и приходится нажимать и думать какая цена была до этого и сколько стоила эта супер услуга, которая уже не кажется такой необходимой. ( Я не хочу обидеть вас как можно сильнее, прям в сердце ранить, наоборот.) Во... а рядом колонка с услугами и оказывается даже дизайн не входит в первичную сумму. Ой какой дизайн, это только макет. И после выбранных функций и макета вдруг понимаю, что нету кнопки ЗАКАЗАТЬ ?!?!?! ?! ololololo =DDD ... ну вы понимаете, вы упустили одного клиента. Ускоримся, доработка сайта. Почти все заказчики ( т.е. владельцы бизнеса) не знают сколько стр. на сайте, с сайтом работает крайний в компании или тот, кто случайно сказал что умеет работать в инете или т.п. Лучший вопрос, за место этого, это выбор готовых ЦМС, на чем стоит сайт ( да да, это тех вопросы, но на самом деле легче на них ответить, чем на количество стр.) Просто под выбором тех начинки написать текст, что эту информацию можно получить у своего хостинга, на котором располагается сайт. Ну это если мы все такие правильный и кончаем от юзабилити. Новые функции и ре дизайн это 2 разные вещи, лучше сделать красивую картинку о предоставлении ре дизайна, а так же вместе с этим мы можем доработать по функционалу, потому что там обычно и бывает. В редком случаи наоборот. Про баннеры все *хорошо, хотя перейдя на них я уже представил как все будет выглядеть лучше. подскажу только с ними ( хотя пользоваться не будете, но... мб другому поможет кто дочитает до суда, берете лист бумаги и карандаш, рисуете линию на линии 4 круга, равно уделенные друг от друга. в круге пишите то что сейчас на сайте и под каждым из них выбор что может быть). оформление по вашему вкусу. при переходе на след выбор может тоже происходить приятная смена цветов, на пример линия становится другого тона, где уже было выбрано. это возбуждает заказчика. И кажется что интерактивности больше чем ваш геморой с аджаксом ( в этом предложении много ошибок, сор). Ладно без кнопки заказать, так нечего и не получилось. Портфолио: делайте превьюшки. Добавьте к тому что есть превьюшки. Можно тупо взять готовую js галерейку. где выводится картинка, внизу кружки, показывающие что есть что то еще при наведени другая кртинка, да или любой другой, без разницы. можно с фильтром если много работ. а с другой стороны краткое описание, что делали именно. можно добавить теги, хотя.. и ссылку. В нашем случае это галерея и описание. Не когда не должно: Описание отсутствует + Стоимость: Не указано. Остальное читать невозможно. Но повторюсь, это может быть только у меня и из-за моей лени чуть изменить ксс. В конце нажал заказать, ну... я выше все описал. В F.A.Q. читал только выделенный текст, и это хорошо. Нужно ссылаться на него с других страниц, а точнее с тех где могут возникнуть вопросы. Я все это написал, не для того, что бы вы обиделись. А что бы это творение смогло принести вам побольше интересной работы и денег. И покажите цвета используемые на сайте друзьям. Может у вас хмурое настроение или мир вокруг вас. А лучше быть понаглее ( но это если сможете ответить за каждую свою предъяву) Пример: _http://rodgerfox.ru P.S. Все это писал я с точки зрения что бы приносил заказы, а не нравится или нет. P.S.S. Если что то не пашет не показывай, основано на английской версии сайта. P.S.S. Пример как может происходить заказ сайта: _http://www.gayadesign.com/scripts/presentationCycle/ ( описывал выше) Пример калькуляторов, так же для заказа сайта: _http://ruseller.com/lessons/les889/demo/demo.htm и _http://ruseller.com/lessons/les1084/index.php

зашел на сайт, бросился в глаза календарь... (1 минута) ... УГ. Худший календарь за 2011-2012 год до даты этого поста. Зачем посылать на страницу на дату когда нечего не произошло? Белый лист? Другое не имеет значение, на сайте болельщиков спортивной команды календарь одно из самых важных вещей. p.s. вы тролили криворуких мальчиков и девочек, а сами делаете УГ.

Я вот, если честно, не очень понимаю как можно работать с глянцевым экраном. У меня когда-то был такой — это же ужас. Только правильный русский мат!

Мне комфортно читать текст хоть на 100% экрана. А делать милипусенькие колоночки (для огромных моников, в том числе) я не буду, даже если так рекомендует некий Андреев. То-то у нас вся документация Times New Roman’ом написана Шрифт с засечками отлично читается, просто мало хороших гарнитур с засечками, которые установлены у всех, но в ближайшее пару-тройку лет ситуация запросто может измениться. На то были совсем другие причины.

Google only. Даже инфу по запеканию мадагаскарских вислобрюхих улиток в сметане ищет лучше.

И снова ошибся {} + {} не сложение блока и объекта, это просто блок и +n {} + [] не сложение блока и массива, +[] приводится к +toNumber(getValue([])) [] + {} а это сложение двух строк "" и "[object Object]"

Ха, я тоже ошибался... В выражении {} + {} первый элемент блок (!), а второй инициализатор объекта Разрыв шаблона { var x = 1; var z=1 } + { x: 1, y:2 } Результат вычисления блока undefined складываем со строкой и получаем NaN

После этой фразы я оставляю клиента делать самому.

Шугич прав в вопросе засечек Про Яндекс - вброс Но в меню засечек быть не должно имхо.

Сайт - гостевая книга, функционал определен заказчиком. Ох, ну да ладно, ведь остальное не имеет значения. Оkay.jpg Это комментарий к данному треду, никак не осядет штоле?

в игнор все выше сказанное закрывайте теги почитайте про сетку измените существующее используя полученные знания из 2 и 3 используйте как можно реже тег <div> Пример: Ваши 2 боковые колонки и рассмотрим блок с меню <div class="sidebar float-l"> <div class="block"> <h2>заголовок меню</h2> <ul><li ...{список меню}... /></ul> </div> <div class="block"> .... </div> </div> CSS: В sidebar задаем ширину колонки, второй стиль float-l расшифровывается как float: left; что бы не клонировать множество в ксс документе, он так же может относится к центральному контенту и ко второй боковой колонке, хотя тут дело каждого. Не всего такой вариант подходит. Может вообще верстка под яблоко =\ Класс block использую ибо в боковых колонках каждый материал разделен неведомой ***, так пускай мы правильно... омг. Да.. поглядел как строится код, изучите что такое сетка в html верстке. Откройте ваш сайт, в вашем случае, разделите на 2 блока, это правая колонка и все слева. То что слева разделите еще на 3, это шапка, боковая колонка и центральный контент. И внизу после всего этого футер. используя float не забывайте про clear. Подробнее об этих тегах: http://htmlbook.ru/css Как вы видите, я заменил ваши дивы в дивах адекватными тегами.. эм.. ну вотс ) Удачи. И в игнор всех кто пишет не по делу и троллит. P.S. А за что минусы??? совет хуже выше сказанного?