Nativescript: CSS background shorthand property

[aboalwi]

I know i should be using background-color and it will work but you don't know how i'm used to it this way.. it's web developer friendly ... please :)

[tsonevn]

Hi @aboalwi,
Thank you for interest in NativeScirpt.
Regaring to your issue, it would help if you could provide more info about your problem or sample project.
In NativeScript you could set background-color to Element using CSS file or just via adding the stile property in the open tag of the component in the XML. I am attaching examples.

XML

 <StackLayout backgroundColor="red">
</StackLayout>

CSS

StackLayout{
    background-color: green;
}

Hope this helps.

[aboalwi]

What i'm saying (in web) background: red; will work just fine.. that's how css works.. it's just a little thing not a big deal it would be nice for it to work in nativescript too.. since we are used to it... yea

[valentinstoychev]

This looks reasonable. The definition of how this property is used on web is here - http://www.w3schools.com/cssref/css3_pr_background.asp

@hshristov - is this something we can support, in order to have the same behavior with the web?

[hshristov]

@valentinstoychev Yes we can support it.

[wnas]

for proper documentation please do not refer to w3 fools. use MDN instead..

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

[NordlingDev]

Same goes for the border property. We should be able to set the border with just one line:

border: 1 #000000;

Don't think border style is possible though, so having this wouldn't work (?):

border: 1 solid #000000;

Correct me if I'm wrong about above.

[hamorphis]

@NordlingArt Currently, we only support solid borders, i.e. no dotted, dashes, etc.

[hamorphis]

By the way, in order to parse a shorthand value like this:

background: #00ff00 url("smiley.gif") no-repeat fixed center; 

I would need to rip of the source code of one of the web browser engines. The formal syntax of the background property is way messed up: https://developer.mozilla.org/en-US/docs/Web/CSS/background

The props can appear in any order they like and some of them may be omitted. Nice!

[hamorphis]

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

[hamorphis]

https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/StyleProperties.cpp

[hamorphis]

It is beautiful :)

https://github.com/WebKit/webkit/blob/f8d95c5a97274dbc4f6080d4059a232bf60db8a7/Source/WebCore/css/parser/CSSPropertyParser.cpp

bool CSSPropertyParser::consumeBackgroundShorthand(const StylePropertyShorthand& shorthand, bool important)
{
    const unsigned longhandCount = shorthand.length();
    RefPtr<CSSValue> longhands[10];
    ASSERT(longhandCount <= 10);

    bool implicit = false;
    do {
        bool parsedLonghand[10] = { false };
        RefPtr<CSSValue> originValue;
        do {
            bool foundProperty = false;
            for (size_t i = 0; i < longhandCount; ++i) {
                if (parsedLonghand[i])
                    continue;

                RefPtr<CSSValue> value;
                RefPtr<CSSValue> valueY;
                CSSPropertyID property = shorthand.properties()[i];
                if (property == CSSPropertyBackgroundRepeatX || property == CSSPropertyWebkitMaskRepeatX) {
                    RefPtr<CSSPrimitiveValue> primitiveValue;
                    RefPtr<CSSPrimitiveValue> primitiveValueY;
                    consumeRepeatStyleComponent(m_range, primitiveValue, primitiveValueY, implicit);
                    value = primitiveValue;
                    valueY = primitiveValueY;
                } else if (property == CSSPropertyBackgroundPositionX || property == CSSPropertyWebkitMaskPositionX) {
                    CSSParserTokenRange rangeCopy = m_range;
                    RefPtr<CSSPrimitiveValue> primitiveValue;
                    RefPtr<CSSPrimitiveValue> primitiveValueY;
                    if (!consumePosition(rangeCopy, m_context.mode, UnitlessQuirk::Forbid, primitiveValue, primitiveValueY))
                        continue;
                    value = primitiveValue;
                    valueY = primitiveValueY;
                    m_range = rangeCopy;
                } else if (property == CSSPropertyBackgroundSize || property == CSSPropertyWebkitMaskSize) {
                    if (!consumeSlashIncludingWhitespace(m_range))
                        continue;
                    value = consumeBackgroundSize(property, m_range, m_context.mode);
                    if (!value || !parsedLonghand[i - 1]) // Position must have been parsed in the current layer.
                        return false;
                } else if (property == CSSPropertyBackgroundPositionY || property == CSSPropertyBackgroundRepeatY
                    || property == CSSPropertyWebkitMaskPositionY || property == CSSPropertyWebkitMaskRepeatY) {
                    continue;
                } else {
                    value = consumeBackgroundComponent(property, m_range, m_context);
                }
                if (value) {
                    if (property == CSSPropertyBackgroundOrigin || property == CSSPropertyWebkitMaskOrigin)
                        originValue = value;
                    parsedLonghand[i] = true;
                    foundProperty = true;
                    addBackgroundValue(longhands[i], value.releaseNonNull());
                    if (valueY) {
                        parsedLonghand[i + 1] = true;
                        addBackgroundValue(longhands[i + 1], valueY.releaseNonNull());
                    }
                }
            }
            if (!foundProperty)
                return false;
        } while (!m_range.atEnd() && m_range.peek().type() != CommaToken);

        // FIXME: This will make invalid longhands, see crbug.com/386459
        for (size_t i = 0; i < longhandCount; ++i) {
            CSSPropertyID property = shorthand.properties()[i];
            if (property == CSSPropertyBackgroundColor && !m_range.atEnd()) {
                if (parsedLonghand[i])
                    return false; // Colors are only allowed in the last layer.
                continue;
            }
            if ((property == CSSPropertyBackgroundClip || property == CSSPropertyWebkitMaskClip) && !parsedLonghand[i] && originValue) {
                addBackgroundValue(longhands[i], originValue.releaseNonNull());
                continue;
            }
            if (!parsedLonghand[i])
                addBackgroundValue(longhands[i], CSSValuePool::singleton().createImplicitInitialValue());
        }
    } while (consumeCommaIncludingWhitespace(m_range));
    if (!m_range.atEnd())
        return false;

    for (size_t i = 0; i < longhandCount; ++i) {
        CSSPropertyID property = shorthand.properties()[i];
        if (property == CSSPropertyBackgroundSize && longhands[i] && m_context.useLegacyBackgroundSizeShorthandBehavior)
            continue;
        addProperty(property, shorthand.id(), *longhands[i], important, implicit);
    }
    return true;
}

[hamorphis]

That is a great task for the community. Write a function that accepts a shorthand background string and returns a JSON object containing background-color, -image, -position, -size, and -repeat.

[vjoao]

This might give you a hint.
https://github.com/gilmoreorless/css-background-parser

[hamorphis]

@vjoao Thanks, I will check it out.

[hgc2002]

Animated GIF for background do not work, shorthanded or not.

.page {
   background: url("~/assets/images/animated.gif");
}

The GIF is shown, but statically, not the animation it contains.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.