I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
My Link
Thanks
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
Related
I am trying to add a style attribute to an img tag in HTMLText markup view. But every time I save or publish, the attribute is stripped.
I found this documentation ("Setting options" - about half way down). So tried that in my /app/_config.php file and did a /dev/build:
HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'img[style]'
);
After doing the above, img src was stripped. Because according to this documentation the tag rules completely replace existing rules for that tag. Which in Silverstripe's case are found in /vendor/silverstripe/admin/_config.php. The point is, this confirms the above config is definitely being used by Silverstripe.
But the style attribute is still being stripped out on save.
Suppose I want all <textarea>s to have some property, but I don't want to modify all pages individually. The website uses a common .css file for all pages.
If it's a change of fonts, padding, paragraph colouring, etc, it's easy, I modify the site .css file and all pages inherit.
But what about adding attribs like onkeydown="STRING" (sorry, not onclick) or autocomplete="off" - can I do that in any way through the .css file, or do I have no choice but hard-coding in each textarea or adding an onload script to every page that has text area elements?
From my answer here:
CSS is not HTML. You cannot set or change the value of an HTML attribute using CSS.
[...]
If you're trying to assign metadata to a class name which then applies to all elements with that class name, that's (again) completely outside of the purview of CSS, and simply not possible in HTML. The only way to assign metadata to an element is to specify it as an attribute on that element. (You can move the attribute declarations to a script if you don't want to specify the attributes on every instance of that class within the markup, but at the end of the day the script still has to populate each element's dataset with those values. Depending on your needs, though, this may be sufficient.)
You don't need to add an onclick handler to every page that contains textareas. You can put the handler in a script and link to that script in every page, just as you would a stylesheet. If you mean you want to do this from the stylesheet alone without modifying the pages or introducing another external file, then the point about CSS not being HTML, or JavaScript for that matter, remains.
If that's still not an option, I'm afraid there are no alternatives. There certainly aren't any for the autocomplete attribute.
Is there any sort of easy way or helper that would enable to functionality to set custom variable flags. For example I could set a color variable to "blue" in the editor and I could use handlebars to add the "blue" class an element in that post.
EDIT: I ended up having to use a different CMS. Ghost was made intentionally to be simple and my needs require more customization features.
This is something I have been trying to figure out, but (being new to ghost), I haven't found a clean way to do this. Unlike Wordpress, there is no field for this in the editor (I have checked the documentation, nothing similar), so you have to apply some custom solution. Here are two options:
If the styling you want to apply depends on a tag, e.g. if 'movie'-tagged posts need some special styling, you can just add CSS because the {{body_class}} helper adds all the tags to the <body> element as tag-classname, e.g. tag-movie.
If tags are not your option, you could use client side JavaScript, check some condition in the content and apply the styling. I use this to change color of an svg logo when it is placed on a hero image that happens to have the same color as the logo. This requires the hero image of the post to follow some url convention, like post-heroimg3663-blue.jpg. Then you can add some inline Javascript to the <head> to change the color of the logo. Not so good, but it should work.
UPDATE:
If the second option works for you, you could even consider creating a Handlebars custom helper and running any styling (via adding a class) on the server side.
Recently I've been reading about how you can make custom tags valid in HTML5 by putting a dash in the name, so I've been wondering what the actual rules / guidelines are for custom tags.
custom-tag √
custom X
-custom ?
custom- ?
What I want to know is if the last two are valid.
Also, as a bonus, I'm kind of curious about how custom attributes work.. as far as I know:
<div my-attribute="demo"> X
<div data-my-attribute="demo"> √
<custom-tag my-attribute="demo"> √
<custom-tag data-my-attribute="demo"> √
But what happens if I'm trying to use existing global attributes, such as title or class?
Does this CSS..
custom-tag.banana {
color: yellow;
}
target this HTML?
<custom-tag class="banana">
Test!
</custom-tag>
Also, this CSS should target the above HTML whether or not global attributes work with custom tags, correct?
custom-tag[class=banana] {
color: yellow;
}
Finally, is there a rule/guideline stating I should have a "-" in the name of my custom attribute, like custom tags? E.g. <div custom-tag="demo">. If there is, like my original question, does it work with -customtag, and customtag-?
Thanks for the help. :)
TL;DR: There are no valid custom HTML5 tags.
I think you may be referring to this Custom Element Working Draft proposed by the Web Applications Working Group, which describes this:
The custom element type identifies a custom
element interface and is a sequence of
characters that must match the NCName
production, must contain a U+002D HYPHEN-MINUS
character, and must not contain any uppercase
ASCII letters. The custom element type must not
be one of the following values:
annotation-xml
color-profile
font-face
font-face-src
font-face-uri
font-face-format
font-face-name
missing-glyph
Additionally, according to HTML5 specification, HTML tag names can only start with ASCII letters. If we assume that the Custom Element proposal does not propose any changes to the HTML Syntax specification, then elements starting with hyphens-minus character is not a valid HTML tag name. If we combine what the Custom Element Working Draft proposal and the HTML5 Syntax specification says, then we can conclude that <-custom> is not a well-formed HTML and so cannot be a valid Custom Element because the tag name does not start with ASCII letter. On the other hand, custom- is both a well-formed HTML and a valid Custom Element.
Note that Custom Element is a Working Draft, not a W3C Recommendation. This means that Custom Elements is not valid in HTML5. Don't get your hopes up either, a lot of Working Drafts that are proposed in W3C never got anywhere (and for good reasons too, not all of the proposals are good).
<rant>Personally I hope that this proposal got shot down. I spent some time reading this proposal, it looks like this proposal tried to reinvent XML Namespace and SGML poorly, and probably forgot about what HTML and the semantic web is supposed to be. In any case, HTML5 syntax already allows authors to use elements that aren't specified in HTML5 specification, I don't see any need to standardize how to create custom elements any further than that. I hope that there would be people in HTML5 working group sane enough to realize how bad this proposal is and vote this proposal off. Keep HTML5 closed from author-defined custom modifications.</rant>
If you want to define your own custom vocabularies, I suggest you should write an XML application with XHTML5, which actually specifies how you can define your own custom elements with XML namespaces. Unlike HTML, XML is designed to be extensible.
As for your question about custom data attribute, this is what the HTML5 specification says:
A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.
So with your examples, these are valid data-* attributes:
data-my-attribute
while these are not:
my-attribute
As far as I can tell, the Custom Elements Working Draft does not specify any additional syntactical requirement for custom attributes on Custom Elements, nor does it explicitly permit using arbitrary non-data-* attributes and how custom attributes interacts with existing HTML attributes, although we can reasonably infer that allowing custom attributes is probably the intent of the proposal.
As for your question about CSS, yes you understood correctly, those are valid CSS selectors to target those Custom Elements. CSS can be used to style any elements, not just elements defined by HTML, but also other markup languages like SVG, MathML, as well as arbitrary XML vocabularies when using XHTML. The CSS Selectors specification does not actually depend on HTML vocabulary in any substantial way (although HTML is used heavily in the examples, as it's what most people are most familiar with). It is for this reason that CSS Selector syntax can be used to refer to any elements in the document, including custom elements that aren't specified in the HTML specification. Styling custom tag already works in all major browsers today. You can use any arbitrary tag names, and select them with the selector that you expect, and CSS will style them as you would expect them to be. There is no requirement for having hyphen-minus in the tag name for this to work.
To pass validation, all attributes you add that aren't available for the element by default should be prefixed with data - it has nothing to do with it containing a dash or not.
Targeting these in CSS is done by using something like element[data-attribute].
So this is valid: <div data-title="Custom Data Title"></div>,
this would not be : <div custom-title="Custom Title"></div>.
Targeting could be done by using div[data-title="Custom Data Title"]{}
Concerning tags, you are limited to the tags provided by the browser if you want your site to validate. You cannot use custom elements willy-nilly, as it increases processing of your page.
You can use javascript to require a page to recognise certain tags, but it still won't validate. This will work, but is not advised:
<script type="text/javascript">document.createElement("custom");</script>
<custom data-name="Something">Here</custom>
Theres more info here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
HTML5 does not have a specific doctype definition or an XML schema definition.
It is possible to create custom HTML tags (custom elements) as they can be used to create web components
Custom attributes are also valid as they can serve to supply a web component with required information
e.g.
<custom-element a="x" b="y"/>
Is it possible to use only CSS to fix url spaces?
Eg: A couple of my url's go like this
<p class="Small-Brown-No-Italic">Link Here: <span class="Hyperlink _idGenCharOverride-1">http://www.example.com/static/TextBox.html</span></p>
Notice the space in the href attribute towards the end. When the user clicks on this url, it gets converted to:
http://www.example.com/static/TextBox.html%20%20
Can CSS help here to fix the spacing issues towards the end of the url? I cannot use JavaScript or jQuery.
No, you can't do this using CSS, you'll need to use, e.g. Javascript*:
var links=document.getElementsByTagName('a');
for(var i=0;links.length;i++){
links[i].setAttribute('href',links[i].getAttribute('href').trim());
}
Remember the seperation of concerns, and responsibility- i.e HTML is for content, CSS for styling and JS for functionality.
* indictative only
You must correct your URLs before sending them.
If you have a lot of URL with this problem, just loop over them and apply trim() (PHP) per exemple.