I am getting 2 error messages when I run my .css file through W3C and do not understand what is wrong.
Does anyone have any suggestions.
Here is the error message:
117 img.floatright Parse Error opacity=70)
79 Property -moz-border-radius is an unknown vendor extension
Corresponding line on my .css are:
79: -moz-border-radius: 10px 10px 0px 0px;
117: filter:alpha(opacity=70);
Properties starting with - are vendor prefix properties. They are used to experimental features which might become standard (without the -moz-, -webkit-, etc) in the future. They are not valid. border-radius has become standard and Firefox no longer supports -moz-border-radius as it has moved to the standard.
filter is a proprietary extension to CSS invented by Microsoft and used in older versions of Internet Explorer. It is not valid.
Related
I am trying to set a background color on my div based on a a color send down by my server. I can't solve this with classes because the color value could be any legal color value. However, VSCode is giving me an error when I type the following. Is EJS not allowed to use with css related stuff?
<div style="background-color: <%= display_color %>;"></div> // Error: property value expected
This is an ESLint error. ESLint is a linting tool. It can help you find and fix (mostly/usually) stylistic problems with your code. It's highly configurable, and can also be used to auto-fix some problems for you.
As you already found, you can disable the lint warning for a single site/line like so:
<div <% /* eslint-disable css-propertyvalueexpected */ %> style='background-color: <%= display_color %>;'></div>
If you want to disable the warning once and for all, create an ESLint configuration file and do it there.
If you haven't installed the ESLint NPM package to use it that way, you're probably getting this because of one of your VS Code extensions.
TL;DR
I need to be able to define specific tokens in the editor as using a certain font feature without forcing it into every type of text present, without resorting to hacky alternatives.
Context:
In Visual Studio Code, you can enable font features using the setting editor.fontLigatures. I made a custom font that adds a totally ordinary OTF Stylistic Set (SS) to represent non-code text, so i can have a regular mono font to display the code, and a more readable, visually different script font to render comments and comment blocks.
To achieve that, i need to target only comments and comment blocks as having the custom stylistic set applied, but i found no way in the settings that lets me specify font features with enough granularity as to only use them for non-code text.
As an example, you can specify italics with this level of granularity using textMateRules settings:
editor.tokenColorCustomizations: {
textMateRules: [
{
"scope": "comment",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "comment.block",
"settings": {
"fontStyle": "italic"
}
}
]
}
However, i cannot force a stylistic set to be applied.
To solve this issue i use this extension, that allows me to inject arbitrary CSS into the editor.
Currently i insert this code:
/* Set documentation comments style */
.mtk38.mtki,
.mtk39.mtki {
font-family: "MonoLisa Script Nerd Font";
font-size: 1.1em;
font-style: italic;
font-weight: 375;
font-feature-settings: ss02 on;
}
/* Set inline comments style */
.mtk15.mtki {
font-family: "MonoLisa Script Nerd Font";
font-size: 1.2em;
font-style: italic;
font-weight: 200;
font-feature-settings: ss02 on;
}
This achieves the result i wanted (forcing a stylistic set into a specific subset of the editor displayed tokens), but it forces me to fidget with the permissions of the VS Code installation folder, and breaks every update. I could add a hook so every time the system updates, it could automatically manage this process, but all this i'm doing is terribly hacky and i'm sure there must be a "proper" way to achieve what i want.
Here's a concrete example of how this looks
Is there a granular way to set font features in VSCode?
When using zero values, YUICompressor assumes that the units of measure are not required, so the YUICompressor will strip them.
But it causes issues in our compressed CSS file as follow:
YUICompressor compressed this:
hsla(0, 0%, 100%, 0)
to this:
hsla(0, 0, 100%, 0)
But by removing the % from the second value for hsla (saturation), YUICompressor generates an invalid css statement.
Is it possible to configure YUICompressor settings to correct this behaviour?
You can configure YUI compressor, although I am not sure if you can explicitly fix your issue.
The compressor can be configured in the OSGi configuration called Adobe Granite HTML Library Manager that you can find in /system/console/configMgr. This configuration should contain a JS Processor Default Configs configuration, that you can change.
But please be aware that this configuration is used for the whole AEM installation. If you want to change settings on the client library level, you can do so in the .content.xml where you define the cq:ClientLibraryFolder of the client library you want to change the settings.
More information on the YUI compressor can be found here:
https://yui.github.io/yuicompressor/
The --disable-optimizations might be what you are looking for.
I have 2 (or more) nested tables: the first is for layout purpose and the others are normal tables with data.
I use the first table because I need to repeat header and footer in each page, so I use
repeat-header:yes;
repeat-footer:yes;
css special rules to achieve this, and it works.
I put my document body into elements.
For data tables I need to give 1px border to the elements, so I created the css rules to do that:
table.data {
border-collapse: collapse;
margin-bottom: 15px;
width: 100%;
}
table.data td {
padding: 5px;
border: 1px solid #000;
border-collapse: collapse
}
and I set the class of my element. But it does not have borders.
It looks like overwrite the data style with the external table style, that doesn't have any border so I don't have borders in my internal tables.
My css is into tag and sometimes I write something inline, but nothing overwrites the 1px border.
I'm using Itext for android and XMLWorker (last version 5.4.4).
My template is HTML and I call from java following method:
XMLWorkerHelper.getInstance().parseXHtml
xmlworker css support is poor, look here:
http://demo.itextsupport.com/xmlworker/itextdoc/CSS-conformance-list.htm
The only fix I found is avoid to use css inheritance and use inline css in every html tag of nested tables.
I'm using GXT's Info class to display messages/notifications. I'm trying to change the style of my Info class using this :
NotificationInfo info = new NotificationInfo(); // extends Info class
// Configuration
InfoConfig config = new DefaultInfoConfig(title, message);
config.setDisplay(milliseconds);
// Formatting
info.setStyleName("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
info.show(config);
But it's not working! Any Pointers?
Thanks.
This should work... (for GXT3 it does anyway)
info.getElement().applyStyles("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
By the way, if you need to do a similar thing for a gwt widget (that you are using in your GXT app) you can do...
info.getElement().<XElement> cast().applyStyles("background-color:#f9ff4f;text-align:center;" + "border:0x solid black; padding: 3px; font-size:11px;font-weight: bold;");
NOTE: I am not sure about the merits of setting it inline like this, but setting a css style just fails (ok the style is set on element but the actual place you want to change gets rendered in a div in a td in table down the line and the div overrides your the value inherit from the css you set). Best practice is surely to go the full appearances route for GXT3 widgets but that's a lot of work for a small change and so I do use the above sometimes.
Applying styles is only a quick solution and not the best, because GWT CssResource has few advantages than direct CSS applying like minification, validation. As mentioned in another answer the best approach is to create an appearance for including your styles and replace the appearance of the NotificationInfo with your one. I have previously answered to a similar question. Think it will help. https://stackoverflow.com/a/15222404/1293087