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

Distribute divs of equal width evenly within a grid

Any advice on how to horizontally center my css slideshow?

Tips for avoiding table column overlap during window resizing situations

What is the best way to place an icon in the lower right corner of a design

Tips for properly utilizing "require" in application.css with the Skeleton framework

Can JavaScript be utilized to dynamically adjust the size of all elements on the screen to a specified percentage of their initial height and width when a certain event occurs?

change the width of a div element to match that of its nearest sibling element

Cursor hovers over button, positioned perfectly in the center

Display text on the screen with a customized design using JavaScript's CSS styles

Hover and hover-off functions in navigation menu

Are there any resources available to ensure my jQuery script is compatible with multiple browsers?

Struggling with converting my menu design into a dropdown menu

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

Modify the color of drop-down menu links

Control the transparency of the initial parent div that includes an *ngFor loop

Utilize CSS to position my image in the center on mobile devices with responsive design

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Transforming CSS with React Router Links

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to