Что не может быть сделано с помощью CSS
Вот фрагмент специально для ember-cli 3.4
import Controller from '@ember/controller';
import { computed } from '@ember/object';
export default Controller.extend({
appName: 'Ember sdfa',
attr1: 1,
attr2: 2,
attr3: 'foo',
attr4: 'bar',
attr5: 3,
attr6: 4,
totalPrice: computed('attr1', 'attr2',function() {
let a = this.attr1 ? this.attr1 : 0;
let b = this.attr2 ? this.attr2 : 0;
let total = a + b;
return total;
}),
});
. Это должно сработать для получения totalPrice, вот тлеблер ember, с которым вы можете поиграть https: // ember- twiddle.com/8801e28a888b469b8057d67a63829808?openFiles=controllers.application.js%2C
Если вы хотите объединить строку вместе, она должна выглядеть следующим образом
fooBar: computed('attr3', 'attr4', function() {
let foo = this.attr3 ? this.attr3 : null;
let bar = this.attr4 ? this.attr4 : null;
return `${foo} ${bar}`
}),
, и результат будет be foo bar
Если вы хотите объединить число, пожалуйста, следуйте ниже
combinedNumber: computed('attr5', 'attr6', function() {
let a = this.attr5 ? this.attr5 : null;
let b = this.attr6 ? this.attr6 : null;
return `${a} ${b}`
}),
, вывод combineNumber равен 3 4
Надеюсь, это поможет. [1114 ]
11 ответов
Ссылка (&) - это то же самое, что указатель (*), за исключением того, что компилятор C ++ гарантирует, что он не быть нулевым. Тем не менее, он все еще может быть висящим указателем (переменная-указатель, которая не имеет ссылки, так что она является мусором и недопустима для любого использования).
это не так хорошо в разработке программного обеспечения. Уловки, которые ваши коллеги и вы сами через пару месяцев не сможете понять, обычно создают ту кодовую базу, к которой каждый либо боится прикоснуться, либо решительно настроен полностью реорганизовать / переписать.Помните принцип KISS. Чем проще это сделать, тем надежнее будет работать.
"... когда на самом деле это можно сделать с небольшим количеством изобретательности. "
Как насчет" избежать необходимости изобретательности ", как вещи, которую трудно сделать в CSS.
;)
Невозможно поместить изображение в точный центр ячейки с атрибутом выравнивания. Это можно сделать с помощью грубой силы.
Звучит очевидно, но вы не можете изменить содержимое с помощью CSS, его можно использовать только для стилизации.
Плавающие элементы в нескольких столбцах, где текст в каждой ячейке может увеличить высоту элемента, но вся строка ниже если это произойдет, нужно нажать вниз.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
Альтернативные цвета строк в таблице без ручного (или с помощью сценария) назначения дополнительных стилей для каждой строки.
Определите положение одного элемента относительно другого. Например, вы не можете использовать CSS, чтобы определить, какая позиция одного блока в группе плавающих блоков, используя тот же класс. Было бы неплохо, например, узнать, является ли один ящик первым всплывающим, вторым или последним.
Обработка вдов. Вдова - это слово, которое свисает с конца абзаца, то есть одно слово начинает последнюю строку в абзаце. Это большой нон по дизайну печатной продукции, но в мире Интернета это сложно контролировать.
Ответ на этот вопрос зависит от ряда вещей:
- Насколько обратно совместимым вам нужно быть? Включение IE6 уменьшит возможности чистого CSS; и
- Сколько вашего сайта имеет фиксированную ширину и / или фиксированную высоту. В CSS есть определенные вещи, которые становятся трудными, если не невозможными, в ситуациях с переменной шириной и / или высотой.
Близкое содержание является проблемой для CSS. Для этого вы можете использовать поплавки, но если сумма ширин превышает ширину контейнера, поплавки в хвостовой части упадут ниже. Таблицы более эффективны в этом отношении, так как они будут сжимать столбцы, где это возможно, чтобы привести вещи в порядок, и ячейки никогда не будут разбиваться на новые строки.
Вы упомянули вертикальное центрирование. Это тривиально с таблицами и трудно или невозможно (в зависимости от совместимости и фиксированной или переменной высоты контейнера и элемента) в чистом CSS.
Вы также можете ссылаться на наведенный контент. IE6 поддерживает только псевдоэлемент: hover для якорей. Javascript требуется для этого браузера для: поведения, похожего на наведение.
По сути, если то, что вам нужно сделать, можно сделать довольно тривиально с помощью чистого CSS, то сделайте это. Если нет, не расстраивайтесь, если вам приходится пользоваться таблицами, несмотря на то, что все фанатики против таблиц (и они фанатики) в ужасе прыгают вверх и вниз.
Если вы хотите сравнительно простой пример этого, проверьте Можете ли вы сделать этот макет HTML без использования таблиц? . Это концептуально простая проблема компоновки, которая тривиальна для таблиц, и еще никто не опубликовал решение, отвечающее требованиям с использованием чистого CSS.
парящий псевдоэлемент на якорях. Javascript требуется для этого браузера для: поведения, похожего на наведение.По сути, если то, что вам нужно сделать, можно сделать довольно тривиально с помощью чистого CSS, то сделайте это. Если нет, не расстраивайтесь, если вам приходится пользоваться таблицами, несмотря на то, что все фанатики против таблиц (и они фанатики) в ужасе прыгают вверх и вниз.
Если вы хотите сравнительно простой пример этого, проверьте Можете ли вы сделать этот макет HTML без использования таблиц? . Это концептуально простая проблема компоновки, которая тривиальна для таблиц, и еще никто не опубликовал решение, отвечающее требованиям с использованием чистого CSS.
парящий псевдоэлемент на якорях. Javascript требуется для этого браузера для: поведения, похожего на наведение.По сути, если то, что вам нужно сделать, можно сделать довольно тривиально с помощью чистого CSS, то сделайте это. Если нет, не расстраивайтесь, если вам приходится пользоваться таблицами, несмотря на то, что все фанатики против таблиц (и они фанатики) в ужасе прыгают вверх и вниз.
Если вы хотите сравнительно простой пример этого, проверьте Можете ли вы сделать этот макет HTML без использования таблиц? . Это концептуально простая проблема компоновки, которая тривиальна для таблиц, и еще никто не опубликовал решение, отвечающее требованиям с использованием чистого CSS.
Я чувствую себя плохо, если вам приходится использовать таблицы, несмотря на то, что все фанатики против таблиц (и они фанатики) в ужасе прыгают вверх и вниз.Если вы хотите сравнительно простой пример этого теста, то можете Можете ли вы сделать это? HTML верстка без использования таблиц? . Это концептуально простая проблема компоновки, которая тривиальна для таблиц, и еще никто не опубликовал решение, отвечающее требованиям с использованием чистого CSS.
Я чувствую себя плохо, если вам приходится использовать таблицы, несмотря на то, что все фанатики против таблиц (и они фанатики) в ужасе прыгают вверх и вниз.Если вы хотите сравнительно простой пример этого теста, то можете Можете ли вы сделать это? HTML верстка без использования таблиц? . Это концептуально простая проблема компоновки, которая тривиальна для таблиц, и еще никто не опубликовал решение, отвечающее требованиям с использованием чистого CSS.
таблицы должны использоваться для табличных данных! Мы всегда должны стараться использовать правильный HTML-код для данного содержимого, в котором можно выполнить разметку. Так что не только div (span, ul, li, dl, strong, em ... и т. Д.) Это гарантирует, что контент не только выглядит правильно, но и правильно (по причинам SEO и доступности)
. Не используя таблицы, это позволяет чтобы преобразовать содержимое из одного вида в другое без необходимости изменения HTML, см. Zen Garden
Пока что, хотя с текущими браузерами CSS-таблицы подобные макеты могут быть сделаны, но это сложно. Существуют методы, позволяющие обойти многие проблемы, если они решены, хотя глобальные оболочки с фоновыми изображениями или исправления положения ...
Рори, я думаю, ты абсолютно прав. Вертикальное выравнивание можно выполнить с помощью line-height, и создание макетов в CSS на самом деле не так сложно. На самом деле, он гораздо более гибок при использовании абсолютного / относительного позиционирования и плавающих элементов.
Людям, все еще использующим таблицы для дизайна, действительно следует соблюдать действующие стандарты.
Продолжая тему, с появлением CSS3 трудно думать о вещах, которые CSS не может сделать. Манипулирование изображениями, манипулирование контентом, расширенные селекторы - все это станет возможным. Но если бы мне пришлось назвать одну вещь, это то, что с помощью CSS вы не можете (и не сможете) поворачивать элементы .
Мне не удалось использовать прозрачность для создания текстовой области переменной высоты на всех страницах. Я считаю, что это невозможно. В конце концов я просто написал быструю функцию JavaScript, чтобы сбросить высоту после загрузки страницы, чтобы заставить работать макет. См. http://peterchristopher.com , чтобы увидеть, что я подразумеваю под прозрачностью для текстовой области.
Таблицы абсолютно ничего не могут сделать, чего не может CSS.
Кажется, существует распространенное заблуждение, что HTML и CSS должны быть простыми. Это не так. Если вам захочется использовать таблицы, то ваши навыки CSS, которые нуждаются в улучшении, а не в технологии (хотя у этой технологии, безусловно, есть много дыр, которые могут быть связаны с улучшением).