Можно ли использовать если/еще условия в CSS?

Question

Можно ли использовать если/еще условия в CSS?

Я создал простой тестовый костюм, и он прошел. Я не мог определить проблему по твоей валидации.

const Lab = require('lab');
const lab = exports.lab = Lab.script();
const describe = lab.describe;
const it = lab.it;
const expect = require('code').expect;
const Joi = require('joi');
describe('Validator accountSetupToken checks', () => {

    let validation = Joi.object().keys({
        name: Joi.string().required(),
        password: Joi.string().min(4).max(20).required(),
        verify: Joi.string().required(),
        email: Joi.string().email().required(),
        username: Joi.string().min(3).max(20).required(),
        referredBy: Joi.any(),
        dob: Joi.date().required().label('Date of Birth')
    });

    it('Reject invalid payload', async () => {
        const result = Joi.validate({
            name: 'vulcan',
            password: 'vulcan@123',
            verify: 'vulcan@123',
            email: 'vulcan@gmail.com',
            username: 'vulcan',
            referredBy: 'admin@gg',
            dob: '12/08/1994'
        }, validation, {abortEarly: false});
        expect(result.error).to.null();
        expect(result.error).to.not.exist();
    });

});

Вот результат.

> lab --coverage-exclude test/data -m 5000n -a code -P "simple" "test/validators"


  .

1 tests complete
Test duration: 13 ms
Assertions count: 2 (verbosity: 2.00)
No global variable leaks detected

Но тогда я увидел в вашем сообщении об исключении следующее

details:
   [ { message: '"password" is required',
       path: [Array],
       type: 'any.required',
       context: [Object] } ],
  _object:
   { password: undefined,
     cookie: 'GG-auth',
     isSecure: false,
     clearInvalid: true,
     ttl: 86400000,
     redirectTo: '/login',
     appendNext: true,
     redirectOnTry: false,
     isSameSite: 'Lax' },
  annotate: [Function] }

Поле пароля кажется неопределенным, вы уверены, что делаете правильный запрос на ваш маршрут?

107

stylesheet css conditional-statements

задан Matthew Strawbridge 19 September 2016 в 09:51

9 ответов

Я удивлен, что никто не упомянул псевдоклассы CSS, которые являются также своего рода условными выражениями в CSS. Можно сделать некоторые симпатичные усовершенствованные вещи с этим без одной строки JavaScript.

Некоторые псевдоклассы:

: активный - элемент нажимает?
: проверенный - радио/флажок/опция проверяется? (Это позволяет, чтобы условное выражение разработало с помощью флажка!)
: пустой - действительно ли элемент пуст?
: полный экран - Является документом в полноэкранном режиме?
: фокус - элемент имеет клавиатурный фокус?
: фокус - в - Делает элемент или какого-либо из его детей, имеет клавиатурный фокус?
: имеет ([селектор]) - элемент содержит дочерний элемент, который соответствует [селектор]? (К сожалению, не поддерживаемый любым из главных браузеров.)
: парение - мышь нависает над этим элементом?
: in-range/:out-of-range - входное значение между/внешняя сторона минутой и макс. пределами?
: invalid/:valid - элемент формы имеет недопустимое/допустимое содержание?
: ссылка - действительно ли это - непросмотренная ссылка?
: не () - Инвертирование селектор.
: цель - действительно ли этот элемент является целью фрагмента URL?
: посещаемый - пользователь посетил эту ссылку прежде?

Пример:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

0

ответ дан 24 November 2019 в 03:41

Еще один вариант (в зависимости от того, хотите ли вы, чтобы оператор if выполнялся динамически или нет) - использовать препроцессор C, как описано здесь .

3

ответ дан 24 November 2019 в 03:41

Это небольшая дополнительная информация к приведенному выше ответу Болдевина.

Добавьте некоторый PHP-код для выполнения if / else

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}

3

ответ дан 24 November 2019 в 03:41

Настройте сервер для синтаксического анализа файлов css как PHP, а затем определите переменную переменной с помощью простого оператора PHP.

Конечно, это предполагает, что вы используете PHP ...

6

ответ дан 24 November 2019 в 03:41

Вы можете создать две отдельные таблицы стилей и включить одну из них на основе результата сравнения

В одну из них вы можете поместить

background-position : 150px 8px;

В другую

background-position : 4px 8px;

Я думаю, что только проверка, которую вы можете выполнить в CSS, - это распознавание браузером:

Conditional-CSS

8

ответ дан 24 November 2019 в 03:41

Ниже мой старый ответ, который все еще актуален, но сегодня у меня более категоричный подход:

Одна из причин, по которой CSS такой отстой, заключается именно в том, что он не имеет условного синтаксиса . CSS сам по себе совершенно непригоден для использования в современном веб-стеке. Используйте SASS ненадолго, и вы поймете, почему я так говорю. SASS имеет условный синтаксис ... и МНОЖЕСТВО других преимуществ перед примитивным CSS.

Старый ответ (все еще действителен):

Это невозможно сделать в CSS в целом!

У вас есть такие условные выражения браузера, как:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

Но никто не мешает вам использовать Javascript для изменения модели DOM или динамического назначения классов или даже объединения стилей на вашем соответствующем языке программирования.

Иногда я отправляю классы CSS в виде строк в представление и повторяю их в коде вроде этого ( php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

15

ответ дан 24 November 2019 в 03:41

Насколько я знаю, в css нет if / then / else. Кроме того, вы можете использовать функцию javascript, чтобы изменить свойство background-position элемента.

3

ответ дан 24 November 2019 в 03:41

(Да, старая ветка. Но она появилась поверх результатов поиска Google, так что другие тоже могут быть заинтересованы)

Думаю, если / else-logic можно сделать с помощью javascript, который, в свою очередь, может динамически загружать / выгружать таблицы стилей. Я не тестировал это в браузерах и т. Д., Но он должен работать. Это поможет вам начать:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

3

ответ дан 24 November 2019 в 03:41

Другие вопросы по тегам:

stylesheet css conditional-statements

Похожие вопросы:

score 125 · Accepted Answer

Не в традиционном смысле, но вы можете использовать для этого классы, если у вас есть доступ к HTML. Рассмотрим это:

<p class="normal">Text</p>

<p class="active">Text</p>

и в вашем файле CSS:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

Это CSS способ сделать это.

Затем есть препроцессоры CSS, такие как Sass . Вы можете использовать там условные выражения , которые будут выглядеть так:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Недостатки в том, что вы обязаны предварительно обрабатывать свои таблицы стилей и что условие оценивается во время компиляции, а не во время выполнения .

Новейшей особенностью собственно CSS являются настраиваемые свойства (также известные как переменные CSS). Они оцениваются во время выполнения (в поддерживающих их браузерах).

С ними вы могли бы сделать что-нибудь в строке:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Наконец, вы можете предварительно обработать свою таблицу стилей на своем любимом серверном языке. Если вы используете PHP, предоставьте файл style.css.php , который выглядит примерно так:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

В этом случае вы, однако, окажете влияние на производительность, поскольку кеширование такой таблицы стилей будет сложно.