Code Editor: Warning messages

[paaljoachim]

In a style.css file I checked.
There are mysterious messages such as:
6 of the following:
"Using width with padding-left can sometimes make elements larger then you expect."

I also got a warning beside border: 1px solid #ddd
"Using width with border can sometimes make elements larger then you expect."

2 warnings in the following code.
"Outlines should only be modified using :focus. and
"Using width with padding can sometimes make elements larger then you expect."

There was also a very long warning message beside display: box. Basically with a lot of text saying that box is the wrong code to use.

I am hoping that this will be adjusted.

[westonruter]

Some additional CSSLint rules probably need to be disabled.

[westonruter]

@paaljoachim the CSSLint rules being raised for you are:

• box-model: ​https://github.com/CSSLint/csslint/wiki/Beware-of-box-model-size
• outline-none: ​https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone

The box-model one can probably safely be removed, but the outline-none one seems like a key one to keep for a11y.

What is the CSS being flagged by the outline-none rule? Is it in fact incorrect?

[paaljoachim]

Hey Weston

* I uploaded the images to trac and relinked them. Hopefully they will show up this time. *

Regarding display: box;
Warning message begins with: Expected (inline I block I list-item...and many other options and ends with I webkit-inline-flex) but found 'box'.

Regarding outline: none
The CSS in use:

! .genesis-nav-menu .sub-menu a {
	background-color: #111;
	outline: none;
!	padding: 20px;
	position: relative;
	width: 200px;
}

The yellow circle with the ! in it is next to the class name. The warning message says Outlines should only be modified using: focus. There is also a ! next to padding and the warning message there which says "Using width with padding can sometimes make elements larger then you expect."

There is also an ! next to a filter.
CSS:

.with-background-image:after {
	-ms-filter: "alpha(Opacity=30)";
!	filter: alpha(opacity=30);
	opacity: 0.30;
}

Expected (<filter-function-list> I none) but found 'alpha(opacity=30)'.

Which to me gives no meaning. If it instead could suggest a better way to code the filter then that would be helpful.

Btw
Regarding the "fatal" error.

.page-header .entry-meta {
		font-size: 1.6ren;
	}

The X is listed beside the ren. As I changed it to rem a dropdown with a very long list of options showed up.

Btw
Here is the warning at the beginning of the CSS. (Genesis child themes have a ton of CSS which just looks like it is minimized at the opening of the coding area of the CSS.)

[westonruter]

@paaljoachim none of your images are showing up.

[afercia]

Re: display: box; at line 1231: box is not a valid value for the display property, the error message is correct.

[paaljoachim]

I am thinking that some of the warnings are correct but the way it lists a full block of code on hover does not really help, but instead creates code overload. It would be good to cut down on the messages and also show the ones that are really needed and then show as precise as possible messages. Bottom line is to keep warning and errors messages helpful and short.

[afercia]

As far as I know, the way errors and warnings are reported is how the CodeMirror "UI" works. I guess any change should be evaluated and implemented upstream. Not to argue, this is one of the things that should always be evaluated before adopting a library.

[westonruter]

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

[melchoyce]

Since it looks like these errors are correct, I'm going to close this out.

If we need to adjust the CSSLint rules we're including, let's make a new ticket for that.