The CSS :lang() selector targets elements within documents that do not specify a particular language

Question

The CSS :lang() selector targets elements within documents that do not specify a particular language

Can elements that do not have a language set or inherited, meaning they are in an unspecified ("unknown") language, be targeted?

Facts

The language of an HTML document or element can be specified using the HTML lang attribute, for example:

<html lang="en">
<h1>Dictionary</h1>
<dl>
<dt><abbr lang="en-Mors">-... - .--</abbr>
<dd><i lang="fr-Latn">à propos</i>
</dl>

or by including code(s) in the HTTP Content-language header:

HTTP/2 200 OK
[other headers]
Content-language: en,en-Brai,fr-Latn

<html>
<h1>Dictionary</h1>
[rest of document]

or using the deprecated, yet still functional <meta http-equiv> tag:

<html>
 <head>
  <meta http-equiv="content-language" content="en,en-Brai,fr-Latn">
</head>
<html>
<h1>Dictionary</h1>
[rest of document]

In all cases, the CSS selector :lang(en) would target the main heading and other elements with no explicit lang attribute set to "en".

Objective

If a document is sent without the Content-language HTTP header or <meta> element, and without a lang attribute, is it possible to target elements in the inevitable "unknown" language?

Furthermore, can the lang() CSS selector be used to match elements with an empty lang="" attribute, effectively opting out of having a language?

HTTP/2 200 OK
[no content-language header or meta present]

<html>
<p>I Want to select this. <span>And this.</span></p>
<p lang="">And this.</p>
<p lang="en">Not this. <span lang="">But this again.</span></p>

Methods that Do Not Work

Neither :lang(), :lang(unknown), :lang(''), nor :not(:lang(*)) work for this purpose. Selectors such as :not([lang]), [lang=''] would logically result in false negatives for scenarios involving the HTTP Content-language header/meta.

Answer Criteria

We are looking for an answer that either provides a solution without false negatives or confirms that it is impossible, with references to specifications (or their absence), along with an explanation of why this is the case.

Additional Notes:

When targeting the empty lang="" attribute, using the selector [lang=""] works, but may seem awkward given the dedicated :lang() pseudo-class for language-related selections.

css

Answer 1

Answer №1

Update 2021: After thorough investigation, this issue is now recognized as a bug here

We incorporate language range in the :lang() rule and they are compared against language tags. There have been mentions of supporting asterisks in language ranges:

Language ranges containing asterisks should be either correctly escaped or quoted as strings, for instance: :lang(*-Latn) or :lang("*-Latn") reference

In an old draft from 2013:

Each language range in :lang() must be a valid CSS identifier [CSS21] or consist of an asterisk (* U+002A) immediately followed by an identifier beginning with an ASCII hyphen (U+002D) for the selector to be valid. reference

However, I am unable to make p:lang(\*-US) work on Windows in Chrome and Firefox. While the rule p:lang(en\002DUS) functions correctly, p:lang(en\002D\002A) does not. The support for the special range "*" in browsers remains uncertain. Moreover, there is no indication of matching "undefined" with the special range "*" in Matching of Language Tags.

Nonetheless, p:lang(\*) and p:not(:lang(\*)) operate effectively on iPadOS across Safari and Chrome. Test it out on iPad by visiting this jsfiddle
https://i.stack.imgur.com/omNKB.png
It appears that chromium may lack complete support for the :lang() feature.

Solution: If utilizing a bit of JavaScript is feasible, consider the following workaround:

document.addEventListener('DOMContentLoaded', init);

function init() {
  if (!document.documentElement.lang) {
    fetchSamePageHeaders(checkHeaderLanguage);
  }
}

//make a lightweight request to the same page to get headers
function fetchSamePageHeaders(callback) {
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (request.readyState === XMLHttpRequest.DONE) {
      if (callback && typeof callback === 'function') {
        callback(request.getAllResponseHeaders());
      }
    }
  };

  // The HEAD method asks for a response identical to that 
  // of a GET request, but without the response body.
  //you can also use 'GET', 'POST' method depending on situation      
  request.open('HEAD', document.location, true);
  request.send(null);
}

function checkHeaderLanguage(headers) {
  //console.log(headers);
  headers = headers.split("\n").map(x => x.split(/: */, 2))
    .filter(x => x[0]).reduce((ac, x) => {
      ac[x[0]] = x[1];
      return ac;
    }, {});

  if (!headers['content-language']) {
    console.log('No language in response header. Marking the html tag.');
    let html = document.querySelector('html');
    html.lang = 'dummyLang';
  } else {
    console.log('The response header has language:' + headers['content-language']);
  }
}

p {
  margin: 0;
}

p[lang=""],
p:lang(dummyLang) {
  color: darkgreen;
  font-size: 2em;
}

p:lang(en\2dus)::after {
  content: '<= english';
  font-size: 0.5em;
  color: rebeccapurple;
}

<p>I Want to select this.</p>
<p lang="">And this.</p>
<p lang="en-us">Not this.</p>
<span lang='en-us'>
    <p>Also, not this.</p>
    <p lang="">But, this too.</p>
</span>

Here, JavaScript is used to determine whether the language is mentioned in the HTML tag or the response header. It assigns the language "dummyLang" to the HTML tag. Consider checking meta tags as well.
For a detailed explanation on retrieving HTTP headers in JavaScript and the advantages and disadvantages of this approach, refer to this discussion on Stack Overflow.

Answer 2

Update 2021: After thorough investigation, this issue is now recognized as a bug here

We incorporate language range in the :lang() rule and they are compared against language tags. There have been mentions of supporting asterisks in language ranges:

Language ranges containing asterisks should be either correctly escaped or quoted as strings, for instance: :lang(*-Latn) or :lang("*-Latn") reference

In an old draft from 2013:

Each language range in :lang() must be a valid CSS identifier [CSS21] or consist of an asterisk (* U+002A) immediately followed by an identifier beginning with an ASCII hyphen (U+002D) for the selector to be valid. reference

However, I am unable to make p:lang(\*-US) work on Windows in Chrome and Firefox. While the rule p:lang(en\002DUS) functions correctly, p:lang(en\002D\002A) does not. The support for the special range "*" in browsers remains uncertain. Moreover, there is no indication of matching "undefined" with the special range "*" in Matching of Language Tags.

Nonetheless, p:lang(\*) and p:not(:lang(\*)) operate effectively on iPadOS across Safari and Chrome. Test it out on iPad by visiting this jsfiddle
https://i.stack.imgur.com/omNKB.png
It appears that chromium may lack complete support for the :lang() feature.

Solution: If utilizing a bit of JavaScript is feasible, consider the following workaround:

document.addEventListener('DOMContentLoaded', init);

function init() {
  if (!document.documentElement.lang) {
    fetchSamePageHeaders(checkHeaderLanguage);
  }
}

//make a lightweight request to the same page to get headers
function fetchSamePageHeaders(callback) {
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (request.readyState === XMLHttpRequest.DONE) {
      if (callback && typeof callback === 'function') {
        callback(request.getAllResponseHeaders());
      }
    }
  };

  // The HEAD method asks for a response identical to that 
  // of a GET request, but without the response body.
  //you can also use 'GET', 'POST' method depending on situation      
  request.open('HEAD', document.location, true);
  request.send(null);
}

function checkHeaderLanguage(headers) {
  //console.log(headers);
  headers = headers.split("\n").map(x => x.split(/: */, 2))
    .filter(x => x[0]).reduce((ac, x) => {
      ac[x[0]] = x[1];
      return ac;
    }, {});

  if (!headers['content-language']) {
    console.log('No language in response header. Marking the html tag.');
    let html = document.querySelector('html');
    html.lang = 'dummyLang';
  } else {
    console.log('The response header has language:' + headers['content-language']);
  }
}

p {
  margin: 0;
}

p[lang=""],
p:lang(dummyLang) {
  color: darkgreen;
  font-size: 2em;
}

p:lang(en\2dus)::after {
  content: '<= english';
  font-size: 0.5em;
  color: rebeccapurple;
}

<p>I Want to select this.</p>
<p lang="">And this.</p>
<p lang="en-us">Not this.</p>
<span lang='en-us'>
    <p>Also, not this.</p>
    <p lang="">But, this too.</p>
</span>

Here, JavaScript is used to determine whether the language is mentioned in the HTML tag or the response header. It assigns the language "dummyLang" to the HTML tag. Consider checking meta tags as well.
For a detailed explanation on retrieving HTTP headers in JavaScript and the advantages and disadvantages of this approach, refer to this discussion on Stack Overflow.

Answer 3

Answer №2

After brainstorming, I've devised a clever solution. Firstly, you can execute some JavaScript code to assign the "xyz" language attribute to all elements that do not have one. Then, you can target those elements using CSS...

document.querySelectorAll("p").forEach(e => {
  if (e.lang == "") e.lang = "xyz";
})

p:lang(xyz) {
  color: red;
}

<p>I Want to style this.</p>
<p lang="">And this.</p>
<p lang="en">But not this.</p>

Answer 4

After brainstorming, I've devised a clever solution. Firstly, you can execute some JavaScript code to assign the "xyz" language attribute to all elements that do not have one. Then, you can target those elements using CSS...

document.querySelectorAll("p").forEach(e => {
  if (e.lang == "") e.lang = "xyz";
})

p:lang(xyz) {
  color: red;
}

<p>I Want to style this.</p>
<p lang="">And this.</p>
<p lang="en">But not this.</p>

The CSS :lang() selector targets elements within documents that do not specify a particular language

Facts

Objective

Methods that Do Not Work

Answer Criteria

Additional Notes:

Answer №1

Answer №2

Similar questions

Guide to creating animated sections using only CSS as you scroll the webpage

Tips for using JavaScript to style an array items individually

Incorporate a pseudo class to a unique custom template or directive within an Angular project

Creating a table with a tableHead cell comprised of multiple components in ReactJS/CSS using Material UI

The mysterious behavior of CSS3 transforms on intricate rotations

How can I specifically target and count children from a certain class using CSS selectors?

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

I am looking to add some flair to my ID "checkimg" using JavaScript

Select the five previous siblings in reverse order using jQuery's slice method

Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps

Does Less undergo a compilation process in a single pass?

Is it necessary to restart the IIS Site when altering the contents of index.html?

Maximizing Content Width in FullCalendar v5 to Ensure Screen Compatibility

Tips on automatically centering an image within a div as it is resized

What is the best way to define the width of text inside a div block?

Adjust the width of the table's td elements

Centering <th> elements is key for achieving a visually appealing print layout

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

Tips for maintaining a sticky header while continuing to utilize Bootstrap table classes such as table-responsive and table-stripped

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)