Кроссбраузерный <select> без кастомизации + защита своего кода.
Добрый вечер.
Так вышло, что у меня одномоментно возникло 2 вопроса - но для каждого из них создавать отдельный пост я не увидел смысла.. 1) Меня заинтересовал следующий момент: Можно ли организовать кроссбраузерную реализацию тега <select> без помощи JS?? Имею ввиду не сам внешний вид - а именно размеры тега + вертикальное центрирование шрифта? Для примера есть такая страница: http://webmaster.ayrveda.ru/Viwall.ru-2/index.html В шапке есть 2 селекта и мне необходимо что бы размеры и вертикальное центрирование было одинаковым в следующих браузерах(в последних их версиях): Mazilla, Google Chrome, Safari, Opera, + IE-7,8,9,10!? Проблема в том, что в ie-7 cелект мне не удаётся вертикально отцентрировать: (c остальными браузерами разобрался.) http://webmaster.ayrveda.ru/ie_7_selects.jpg 2) Реально ли на сегодняшний день загрузить сайт на свой хостинг и продемонстрировать его заказчику таким образом, что бы он не смог его украсть?) В том числе и через специализированные программы(например: Фаербаг, Скрапбук и т.п.) ??? Интересно мнение бывалых в этом деле пользователей.. P.S. Буду признателен за любые конструктивные советы по данным вопросам.. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<style>
.select-wrapper {
position: relative;
overflow: hidden;
border: 1px solid #e8e8e8;
border-radius: 5px;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffff, EndColorStr=#eeeeee, GradientType=0);
box-shadow: 0 0 4px #ccc;
height: 22px;
width: 150px;
margin: 10px;
}
.select-wrapper select {
position: relative;
width: 100%;
opacity: 0;
/** IE7 disable style **/
filter: expression('filter: none;');
-ms-filter: "Alpha(opacity=0)";
z-index: 1;
top: 0;
left: 0;
}
.select-wrapper:before {
position: absolute;
content: attr(data-select-value);
white-space: nowrap;
font-family: Tahoma, Arial;
font-size: 12px;
color: #000;
height: 100%;
width: 100%;
margin: 4px 0 0 5px;
}
.select-wrapper .select-arrow {
position: absolute;
background: inherit;
filter: inherit;
top: 0;
right: 0;
height: 100%;
width: 20px;
}
.select-wrapper .select-arrow:after {
position: absolute;
content: " ";
border: 0;
border-top: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
width: 0;
height: 0;
top: 50%;
right: 4px;
margin-top: -2px;
}
.select-wrapper select:focus + .select-arrow:after {
border-top: 5px solid #555;
}
</style>
</head>
<body>
<div class="select-wrapper" data-select-value="- select city -">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option>- select city -</option>
<option value="1">Saint-Petersburg</option>
<option value="2">Moscow</option>
<option value="3">New York</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
</body>
</html>
Правда в ИЕ7 они остаются стандартными, потому как там нет псевдо-элементов after/before... Хотя лично я уже давно положил болт на ИЕ7. В остальных браузерах все пучком. |
Я так понимаю что JS код в данной реализации всё же необходим?
Имею ввиду:
onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)"
+ data-select-value="..." P.S. Но все равно Большое Спасибо! Не знал об этом. Обязательно возьму на заметку.. |
А зачем вы поддерживаете IE7 но совсем забыли про IE6? Число пользователей и контингент примерно одинаковый. Насколько я знаю все уже давно забили как на IE6 так и на IE7, оставляя минимальную поддерживаемую версию - IE8 (ибо XP-шки..)
По второму вопросу - речь про html-страницы? Если заказчик задастся целью, то сохранит исходники себе. Но я таких никогда не встречал. Можно разве что усложнить ему процесс (до такой степени, что он плюнет на это дело). Но готовых вариантов не подскажу. Был тут чел на форуме, который занимался подобной фигней ) Хотя не, js еще можно запрятать, а вот HTML и CSS можно всегда скопировать в отладчике браузера. |
Цитата:
Насчёт сохранения кода - речь действительно о html страницах. |
А по ссылке твоя работа? Жесть. Нафига такие классы?
Цитата:
|
Цитата:
+ если вы заметили, то в вашем примере 2 класса?(а не один!) На сайте планировалось 10000 страниц примерно. На каждой странице есть класс 'center_content_index' и добавлять новый класс(к этому блоку) на новой странице я не имел возможности потому как это не нравилось программисту. Как в таком случае избежать проблем? (Буду рад выслушать вашу версию!) 2) По следующей странице: https://www.free-lance.ru/commune/pr...a-kritika.html Человек говорит о том что nav-ul-li вполне подходит для главной навигации. (Скинул бы вам ещё ссылку на форум HTMLbook.ru - но он, к сожалению, сейчас не работает.) Вот к примеру ссылка на книгу: https://dl.dropboxusercontent.com/u/34067843/%D0%A5%D0%BE%D0%B3%D0%B0%D0%BD%20%D0%91.%20-%20HTML5%20%D0%B8%20CSS3.%20%D0%92%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D 0%BA%D0%B0%20%D0%BF%D0%BE%20%D1%81%D1%82%D0%B0%D0% BD%D0%B4%D0%B0%D1%80%D1%82%D0%B0%D0%BC%20%D0%BD%D0 %BE%D0%B2%D0%BE%D0%B3%D0%BE%20%D0%BF%D0%BE%D0%BA%D 0%BE%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F%20-%202012.pdf Посмотрите стр. 30, 34! (только страницы именно в книге а не в браузере.) Как по мне там тоже самое что и у меня в плане тега <nav> реализовано.? Насчёт меню в принципе с вами согласен - но опять же сейчас уже не помню точно где(По моему в книге Б.Хогана - но возможно и ошибаюсь.) читал о том что допускается что бы <menu> использовался и таким образом как на данной странице. http://htmlbook.ru/html/menu Возьмите хотя бы отсюда первый пример - там аналогичная ситуация. P.S. А вообще, если честно, мне непонятно зачем такая педантичность к этим тегам? Вы за SEO оптимизацию что ли беспокоитесь? (Если так - то это напрасно.) |
С классами понятно.
Что-то ты на какие-то сомнительные источники ссылаешься. Вот, прочитай тут про использование <menu> - http://www.w3.org/wiki/HTML/Elements/menu Хотя на htmlbook тоже все правильно написано, ты видимо невнимательно прочел. Цитата:
|
Цитата:
Я понял вашу мысль. Но во первых, на практике, с точки зрения SEO так оно и получается. (По большому счёту.) Во вторых - в моём случае я считаю, не настолько всё серьезно, как вы описали. |
Я всего лишь указал на недочет и как его исправить:
Цитата:
|
| Часовой пояс GMT +3, время: 22:25. |