css Question posted in
Some basic documentation can be found here.

What is the meaning and/or purpose of "running" in the syntax for CSS position?

In the formal syntax listed on MDN for the position property, the following are listed as possible values:

position = 
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>  

<running()> = 
  running( <custom-ident> )

Most of these are well known and listed in the current draft spec for that property on csswg.org, except for that last one: running(). That’s defined below, but I don’t see anything in the Value definition syntax about values with "functional" notation.

What does this mean? And, if possible, what is the intended purpose of this part of the grammar? Is this a specific extension for a specific browser or something? What is the meaning of the "functional notation" (not sure what it should be called) in the grammar in this context?

I’ve tried searching "running" on the MDN site, as well as Googling variations of "css running position", as well as Ctrl+F-ing the spec drafts on csswg.org, but I can’t seem to find any other references to this.

There are other questions (such as this) referencing how to interpret the CSS grammar syntax, but the linked documents don’t mention this running() function (I’ve tried both Ctrl+F-ing for running and ().

Tags:

2

Answers


  1. 0

    It’s in this Spec: https://www.w3.org/TR/css-gcpm-3/#running-elements

    Many headers and footers cannot be represented only by unformatted text. A book title serving as a running head may contain an italic word, for example. A mechanism is needed to move or copy elements into margin boxes. To do this, we add the running() value to the position property, and the element() value to the content property.

    Login or Signup to reply.
  2. 0

    What is running()

    Its a value used for printing. As you may know css has a set of properties that enhance the way you can print a document/page and CSS is used in the context of documents. Running allows you to specify that a certain element is not to be placed on the page but rather on one of the "margins", lets say like the footer or the header.

    I quote

    position: running(custom-ident) removes the element (and associated ::before and ::after pseudo-elements) from the normal flow, and makes it available to place in a page margin box using element(). The element inherits from its original position in the document, but does not display there.

    Example:

    @top-center {
  content: element(heading);
}

p.rh {
  position: running(heading);
}

p.rh::before {
  content: counter(page) ' / ';
}
    <p class="rh"><i>Running header</i> test</p>
<h2><i>Normal content</i> test</h2>

    You can read more and see more examples in the specification

    IMPORTANT as you can see in the specification, this is a draft. You can read on this SO question about the usage on browsers.

    Why/when would you use it

    Suppose you want to make a page, such that when you print it, your page logo appears in the header and the page number appears in the footer. That’s when you need running()

    What is the meaning of the "functional notation"

    In CSS they are called value functions. I quote from MDN

    CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property

    In short, they behave a bit like functions, in the sense that they accept parameters and return a value

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search