Search code examples
mobiledojowebstorm

Dojo: A basic dojox/mobile app generates warnings


I'm following the mobile tutorial series for Dojox/Mobile - TweetView, and I noticed that during the start up of a very basic app (even though the app looks like it should), the console prints dozens of warnings like "Invalid CSS property value".

I am using Chrome (Version 29.0.1547.57) & WebStorm IDE, the warnings appear on the console of the IDE.

So the question is, am I supposed to ignore these warnings, or am I doing something wrong?

HTML page:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="pragma" content="no-cache">

        <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
    </head>

    <body>

        <div data-dojo-type="dojox.mobile.View">
            <h1 data-dojo-type="dojox.mobile.Heading">About</h1>
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Generic Mobile Device</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText:'AcmePhone'">
                    Network
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile"
            ],
                    function(parser, deviceTheme){
                        // startup the application
                        parser.parse();
                    });
        </script>
    </body>

</html>

Webstorm Console Warnings:

Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/CheckBox.css:42
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:65
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:67
Invalid CSS property name: animation-iteration-count    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:69
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:71
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:77
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:79
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:81
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:87
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:91
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:95
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/IconContainer.css:99
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/RadioButton.css:38
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/ToggleButton.css:46
Invalid CSS property value: radial-gradient(6 at center, #17df25 0%, #1ba51c 100%)  C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/domButtons/DomButtonSilverCircleGreenButton.css:29
Invalid CSS property value: radial-gradient(6 at center, #ff7a07 0%, #e66b03 100%)  C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/domButtons/DomButtonSilverCircleOrangeButton.css:29
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/ProgressIndicator.css:23
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/iphone/ProgressIndicator.css:34
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:3
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:5
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:7
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:11
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:13
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/dissolve.css:15
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cover.css:9
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/reveal.css:9
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:3
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:5
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:9
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:11
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:15
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:17
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:65
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:67
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:71
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:73
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:124
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:126
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:130
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:132
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:168
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:170
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:174
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:176
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:212
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:214
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:218
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:220
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:256
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:258
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:262
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:264
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:300
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:302
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:306
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:308
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:344
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:346
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:350
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:352
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:388
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:390
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:394
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:396
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:432
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:434
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:438
Invalid CSS property name: transform-origin C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/cube.css:440
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/slidev.css:9
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/coverv.css:9
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/revealv.css:9
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:3
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:5
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:7
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:12
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:14
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:16
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swirl.css:20
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:3
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:5
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:7
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:11
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:16
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:18
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleOut.css:20
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:3
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:5
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:9
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:13
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:17
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/swap.css:21
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:4
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:6
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:8
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:12
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:14
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:16
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/scaleIn.css:20
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:4
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:6
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:8
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:12
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:14
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:16
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomIn.css:20
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:3
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:5
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:7
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:11
Invalid CSS property name: animation-duration   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:16
Invalid CSS property name: animation-name   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:18
Invalid CSS property name: animation-timing-function    C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/zoomOut.css:20
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/coverv.css:9
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/revealv.css:9
Invalid CSS property value: transform   C:/Users/Alon/Desktop/dj/dojox/mobile/themes/common/transitions/slide.css:9

Solution

  • Invalid CSS properties are not that important I think, I'm getting a lot of these too. I usually set the logging level to something higher than warnings. Usually these invalid properties are there because in some browsers they are supported and in other browsers they might not be valid. For example, many UI related frameworks use the vendor specific prefixes like -o-, -webkit-, -moz-, ... . They only work on the specific browser, but are simply ignored by the other browsers (or they can give you a warning).

    For example (this is a part of the zoomIn.css file you get errors from):

    .mblZoomIn.mblIn {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-name: mblZoomInIn;
        animation-name: mblZoomInIn;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    

    You get warnings for animation-duration, but your browser (chrome) recognizes -webkit-animation-duration, so there are no problems.

    But in a later stage of the tutorial you might have some problems. The TweetView tutorial is based upon the Twitter v1.0 API, which is deprecated for more than a year (if I remember correctly) and was removed somwhere in June 2013.

    Nevertheless, the tutorial might give you a basic idea of how you can create a mobile application with Dojo.