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.
Hi guys I'm looking for a Polymer-type checklist filtering element: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/filtering/checklist-filtering
There would be a list with checkboxes and maybe a select all item on top. And then there will be like a paper-input on top that allows filtering of items below.
I can hack together a checklist-filtering component using paper-input and iron-dropdown. Maybe I would make something like this https://github.com/samccone/paper-typeahead, assuming that nothing is available as of now.
No.
Most of existing and shared Custom Elements can be found at:
Component Kitchen
Custom Elements IO
There's also an alternate Material Design Library with elements that you could reuse to build your custom element :
ExpandJS
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"/>
Greetings to all Orbeon's folks,
I would like to add custom xml semantic markup to a XForms using Orbeon.
For instance, adding the tag or the property "person".
So do I have to create new tags or properties or both? What is the best practice? Considering differences between marking-up structures and marking-up elements?
Where can I put semantic markup without disturbing the behaviour of the Orbeon engine and still being able to access to it? I think it should be in the model declaration? Am I wrong?
Thanks
Use the label or hint elements to add metadata which is hidden or context-sensitive. Use placeholders to show that data as an annotation:
<xforms:label appearance="minimal">Your name</xforms:label>
I'm working on a Drupal site/theme. The CSS and PHP modifications are fairly easy; they just take a little time to learn and get working exactly how I want.
However, I'm having issues applying CSS styles to some elements because of what I think is a property function.
The code looks like <h2 property="dc:title" datatype="" class="node-title">.
What is a property function and what does it do or control within the page? Also how can I modify or remove it?
It's not a property function; it's an attribute that is used from RDFa, and that is added from the RDF module.
The easier way to remove those attributes is to disable the module, but I would not suggest doing it, as the purpose of that module is to enrich your content with metadata to let other applications better understand its relationships and attributes.
Alternatively, if the problem is just with that property, used for the nodes, then you can implement code similar to the following one:
function mymodule_preprocess_node(&$variables) {
if (isset($variables['title_attributes_array'])) {
$variables['title_attributes_array']['property'] = NULL;
}
}
The module should be executed after the RDF module, to allow its hook to be executed after the one implemented by the RDF module.
I have not seen any compatibility problem between the attributes added by the RDF module and the JavaScript code executed by Drupal core or third-party modules. It would probably be the case to investigate why you are having problems with the JavaScript code when those HTML attributes are added.
in your css file, put:
h2[property="dc:title"]{color:#FFFFFF;}
or if it is a link, you may need:
h2[property="dc:title"] a {color:#FFFFFF;}
From wikipedia, check out RDFa
RDFa (or Resource Description
Framework – in – attributes) is a W3C
Recommendation that adds a set of
attribute-level extensions to XHTML
for embedding rich metadata within Web
documents.
It is basically a way to add more metadata to XHTML docs for better semantics.