I have set my CSS level to 3, yet transitions are not being detected by phpStorm.
-webkit-transition
is a viable property that you can give an element. You can even check it here:
Transitions W3C
Also, I am using Level 3 of CSS3. So why does it give an error?
Is there any way to solve this?
In Webstorm 8 you can check "Ignore vendor specific CSS properties" under Project Settings -> Inspections -> CSS -> Unknown CSS Property and W3C CSS Validator in the same category. Custom properties (like transition) can be defined (comma-delimited) in Unknown CSS Property entry. This is probably applies for PhpStorm as well.
W3C CSS Validator Inspection in PhpStorm is exactly the same as what you get here (the official W3C CSS Validator website), just a local version -- nothing more.
If aforementioned official online tool produces errors/warnings on your code then there is nothing you can do about it except disabling this extra inspection (yes, this is additional inspection to PhpStorm's own inspections).
If it's opposite (online tool produces no errors or warnings) then submit a bug report to the Issue Tracker and in one of the next releases PhpStorm will have more up-to-date version of this tool.
Alternatively, you can add the unknown CSS property to custom properties, as shown in the following screenshot (this is the result after you run "Inspection Code..." action):
This is a way to train your PhpStorm/WebStorm with the missing CSS properties that you use. I also export my WebStorm/PhpStorm settings so once I fixed these missing CSS properties, i will not have to do it again.
Related
I am using Visual Studio Code, is it possible to change a class name for instance only in the CSS file and this change is also applied in the HTML document? or vice verse, changing the class name in HTML and seeing it change in the CSS file.
Full disclosure, I don't use Visual Studio, but a quick search looked like this is what you may be looking for?
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Unless I'm misreading?
At the time of writing, this feature does not exist in VS Code.
VS Code is currently unable to know if the same CSS class is referenced in other files, so refactoring across multiple files wouldn’t work.
If you have your cursor on a CSS selector and you press Shift + F12 to find all references, you will find references to the class name only within the same CSS file, even when you are using the class in your HTML.
There is an open issue for implementing cross-file IntelliSense for CSS classes and ids. This might lead to supporting refactoring across HTML and CSS files in the future.
I am dealing with a complex page with a lot of CSS files (that were not created by me). I am fighting with a CSS style that is not on the more obvious places (css files) that I can find and I don't have a clue where it is being define.
Is there any tool available that can tell me the file where a particular property of a class or id is being defined (having in mind that this property can be inherit from other definition)?
Chrome Devtools enables you to quickly do this.
I have an MVC web application I am building using Visual Studio 2015.
Some of my forms use auto-fill for input elements, but when using Chrome, auto-filled fields are left with the distasteful pale-yellow background due to the Chrome user agent style sheet. The widely accepted solution to this is to use the following CSS to render inputs without the yellow background:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
This approach has worked perfectly in all my previous projects (which were built with Visual Studio 2013).
However, in my CSS file, the above code is showing as invalid with the following error:
Validation (CSS 3.0): ":-webkit-autofill" is not a valid pseudo-class.
My previous projects use CSS3 and they are recognising the pseudo-class and applying the style as expected. I have searched the Q&A's here, and googled the error, but I am not finding anything that addresses this issue.
Please can someone shed some light on a) What could be causing this error, and b) Any potential solutions.
To clarify further, I am applying the style at the very bottom of my Site.css file, and there are no in-line styles which could over-ride the expected behaviour. Developer tools confirm the style is not being applied, which indicates that the error is genuinely what is stopping the style from being applied.
As my previous VS2013 projects recognise the pseudo-class, I am assuming that some setting in VS2015 may be the cause, but I cannot find anything to confirm that.
Any advice would be appreciated.
Many thanks
As :-webkit-autofill is a Non-standard css pseudo-element, Visual Studio 2015 is throwing that error due to it's default configuration to correct .css errors.
What you could do is disabled it by, going into: Tools > Options > Text Editor > CSS > Advanced and then toggle uncheck Validation on the right pane. The names may slightly vary, due to the fact I'm translating from my native language.
Hope it helps!
I've just opened my first Ionic based mobile project, and the HTML templates are really full of Ionic tags, like <ion-modal-view>, which courtesy, ReSharper (I deeply suspect), has a wavy blue underline, as do half the other tags in the template. I deplore working with these lines on the screen, as they indicate there is something wrong (OK, maybe for the W3C it is wrong), when there is nothing wrong. Can, and how, I get rid of these damned blue lines?
Well I'm a big believer in writing valid html. Standards are there for a reason, and we can't complain about Microsoft not following them with IE if we don't follow them ourselves.
I did some searching and couldn't find any information on whether Ionic could be written as valid html.
So personally were I in your position I'd either consider whether writing an XHTML DTD that supported Ionic's mark-up was an option, or chose a framework that I could write valid mark-up in.
Since I'm guessing neither of those is an option you could go to:
Resharper -> Options -> Code Inspection -> Settings
Look for the section under the heading Elements to skip -
Either find File masks and add *.html (or whatever other file extension you might be using) or find Files and folders and mark the specific files/folders that you don't want Resharper to look at.
I want to suggest a better alternative.
Instead of skipping inspections of all *.html files it should be possible to just ignore the inspection for Unknown Tags:
I have used command tag and its output is not correct
here is the code:
<html>
<body>
<menu>
<command onclick="alert('Hello World')">Click here</command>
</menu>
</body>
</html>
I am viewing the output in firefox and internet explorer.
The command tag isn't supported by any browsers besides Internet Explorer 9
http://www.w3schools.com/tags/tag_command.asp
The <command> tag is currently supported only in IE 9 not earlier or later versions, or any other browser.
http://www.w3schools.com/tags/tag_command.asp
The command element has been proposed in various drafts, including the first HTML5 CR in 2012 (where it was marked as being “at risk” due to lack of implementations), but it has been dropped from newer drafts. Any implementations of it, and the associated Command API, should thus be considered as experimental.
The current drafts have the menuitem element for similar purposes. But note that it is just a proposed element, it is not present in the currentl HTML5 CR, and it probably has just limited experimental implementation in Firefox.
The conclusions depend on what you are trying to achieve. The idea of command was to provide, together with the menu element, a way of setting up a dropdown menu of scripted operations. In the simplest case, you can do such things with the normalselectelement with anonchange` attribute with a value that performs different operations, depending on the index of the selected option.