Показать / скрыть элемент, используя только CSS3 - почему это не сработает? - PullRequest
Новая
       12

Показать / скрыть элемент, используя только CSS3 - почему это не сработает?

0 голосов
/ 15 апреля 2010

Я разрабатываю автономное веб-приложение, которое (пока) предназначено только для Safari на iPhone / iPod.Главным образом для забавы, но также и для того, чтобы уменьшить мою зависимость от привязок событий jQuery (и, таким образом, надеюсь, что это ускорит отзывчивость пользовательского интерфейса), я попытался заменить некоторые CSS3 для основных функций отображения / скрытия.

Следующий код являетсяупрощенный пример, который работает в Firefox 3.6.3, но не в последней версии Safari, как для настольных, так и для мобильных устройств: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    input:not(:checked) ~ select { display: none; }
    input:checked ~ select { display: inline; }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" /> <label for="cb">Toggle select</label>
  <select id="sel"><option value="">Select Box</option></select>
</body>
</html>

Я не ожидал, что это сработает, но мне было приятно видеть, что это работает,по крайней мере, в Firefox.Есть идеи, почему это не работает в Safari?В нем <select> изначально скрыто, что правильно, и веб-инспектор сообщает мне, что при каждом щелчке флажка устанавливается правильное значение отображения, но элемент не отображается.

IЯ провел аналогичный успешный эксперимент, в котором я обертываю текст внутри <label> в тег <a href="#sel> и использую правило select:target { display: inline; }, но такое поведение я в конечном итоге не желаю.

Дошел ли я слишком далеко?Разве такие вещи лучше оставить в Javascript?

1 Ответ

1 голос
/ 15 апреля 2010

Я не слишком долго смотрел на это, но в принципе это работает, если вы немного упростите его: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  <style type="text/css">
    input:not(:checked) + select {
      display: none; 
    }
    input:checked + select {
      display: inline; 
    }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" />
  <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

В вашем примере, я думаю, что не работает селектор братьев и сестер - кажется: проверено и: не (: проверено) работает нормально. Приведенный выше пример работает для меня в Safari 4.0.4.

Но Я бы сказал, что это слишком справедливо. В конечном счете, CSS - это технология презентации, и, применяя этот подход, вы смешиваете презентацию с функциональными проблемами ... лично для меня, я бы сделал это в Javascript.

...