Recent Posts

1

HTML / CSS / Re: Creating and showing Jason's Dialog in Javascript

« Last post by AndrewTraub on 22 Jun 2022, 11:39:05 am »

Code: [Select]

window.location.hash = "#id_of_your_modal"; // open

window.location.hash = "#"; // close
Done. Assuming you're using the hash target version. The button:focus version:

Code: [Select]

buttonElement.focus(); // open

buttonElement.blur(); // close
There's also the input:checkbox version

Code: [Select]

inputElement.checked = true; // open

inputElement.checked = false; // close
Don't overthink it.

Thanks - can you give me the urls for each of these methods and when would you chose one implementation over the other (hash vs button vs input)?

2

Development and technology news and discussion. / Eulogizing Internet Explorer

« Last post by Jason Knight on 15 Jun 2022, 04:11:20 pm »

Given that IE officially dies today (15 June 2022), I thought I'd do an article pointing out positive things it gave us, instead of bashing it for all the shortcomings that became painfully apparent from 2003 onward.

https://deathshadow.medium.com/goodbye-internet-explorer-1e668a2a8e5e

3

HTML / CSS / Re: display: run-in - alternatives?

« Last post by Jason Knight on 14 Jun 2022, 10:07:07 pm »

Float has the headache of vertical alignment and whilst there are tricks to try and deal with it -- like padding the top of the paragraph the difference in line-height -- another approach is to just make the heading and paragraph inline. If there's a block wrapper (section / article / header / footer) or a block element (paragraph, list) after the first paragraph, it works without the hassles of calculation. Just set vertical-align:bottom on the header.

https://codepen.io/jason-knight/pen/RwQvjMO

Of course this won't work if the next tag is also a H2, thus why SECTION, ARTICLE, or DIV wrapping each subsection is a good idea.

A big advantage is that it all being inline, it also doesn't cock-up if the heading word-wraps like floats do.

4

HTML / CSS / Re: display: run-in - alternatives?

« Last post by GrumpyYoungMan on 14 Jun 2022, 04:34:19 am »

I did think that float would be the equivalent to display: run-in

5

HTML / CSS / Re: display: run-in - alternatives?

« Last post by coothead on 13 Jun 2022, 11:36:01 am »

Hi there 0xdeadbeef,

well, I didn't have to put the  p element within the h2 element. 

HTML

Code: [Select]

<h1>page title</h1>
<h2>Heading:</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta.
</p>

CSS

Code: [Select]

body {
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
    text-align:  center;
    text-transform: capitalize;
}
h2{
    float: left;
    margin: 0;
    padding-right: 0.33em;
 }

This is how it looks for me...



If you want same baseline for the  p element and h2 element,
no problem, just use this...

Code: [Select]

h2{
    float: left;
    margin: 0;
    padding-right: 0.33em;
    line-height: 0.66em;
 }

coothead

6

HTML / CSS / Re: display: run-in - alternatives?

« Last post by 0xdeadbeef on 13 Jun 2022, 11:16:45 am »

Well, I didn't test your exact code snippet, I went for a more semantic alternative (not counting the div wrapper, which would probably be a <section> in a real use-case scenario):

Code: [Select]

<h1>Site title</h1>
<div>
  <h2>Run-in heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum ea dignissimos? Omnis natus iste eos numquam quos necessitatibus quo quisquam accusantium ipsa blanditiis obcaecati magni ut nulla officia fugit labore, delectus architecto nemo iusto saepe soluta sit eius esse. Ullam quos autem assumenda, adipisci quidem quisquam natus beatae perferendis doloremque nemo? Perspiciatis nihil animi nisi molestias ullam omnis harum, neque recusandae non iusto dolores ipsa in vitae optio quisquam id officiis hic quod voluptatum dicta nulla nam ut nostrum possimus. Sunt id optio perspiciatis, debitis asperiores laborum doloremque voluptas hic, qui autem cum. Veritatis doloribus possimus consequatur ullam deleniti!</p>
</div>

with the following CSS:

Code: [Select]

h2 {
  margin: 0;
  float: left;
}

Setting a background color and different font sizes on body and h2/p is irrelevant here, because the problem remains the same: baselines are not aligned, and more than one line of paragraph text appears to the right of the heading before the text wraps around it.

7

HTML / CSS / Re: display: run-in - alternatives?

« Last post by coothead on 13 Jun 2022, 11:01:28 am »

Hi there 0xdeadbeef,

your screenshot suggests that you must have omitted this...

Code: [Select]

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }

...from your test

coothead

8

HTML / CSS / Re: display: run-in - alternatives?

« Last post by 0xdeadbeef on 13 Jun 2022, 10:38:31 am »

Code: [Select]

<h2>
<span>Lorem ipsum:</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta. 
</p>
</h2>


But doesn't this go against the semantics of second-level headings? I don't want the whole paragraph to be a descendant of the heading; the heading should head its section, not contain it.

Code: [Select]

h2 > span{
    float: left;
    padding-right: 0.33em;
 }
h2 > p {
    font-size:  0.66em;
    font-weight: normal;
 }


Yes, floating the heading to the left was also my first intention, but that doesn't quite work. Since the paragraph has a smaller font size, there's a good chance the heading will "catch" several lines of paragraph text, resulting in what you can see on the screenshot: https://prnt.sc/2ZwjinfCNic2

9

HTML / CSS / Re: display: run-in - alternatives?

« Last post by coothead on 13 Jun 2022, 09:46:49 am »

Hi there 0xdeadbeef,

I was not aware of the run-in property
and would simply have coded it like this...

HTML

Code: [Select]

<h1>page title</h1>
<h2>
<span>Lorem ipsum:</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin ut turpis tortor. Pellentesque sodales vulputate
varius. Quisque placerat est id mauris euismod viverra.
In semper libero eget velit aliquam, nec luctus libero
porta. 
</p>
</h2>

CSS

Code: [Select]

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
    text-align:  center;
    text-transform: capitalize;
}
h2 > span{
    float: left;
    padding-right: 0.33em;
 }
h2 > p {
    font-size:  0.66em;
    font-weight: normal;
 }

coothead

10

HTML / CSS / display: run-in - alternatives?

« Last post by 0xdeadbeef on 13 Jun 2022, 06:54:54 am »

Reading the CSS spec, I've stumbled on a section about Run-in Layout (https://www.w3.org/TR/css-display-3/#run-in-layout), and the use-case they provide for it (having a heading displayed inline along the paragraph while also keeping a neat semantic HTML structure) looks absolutely legit. For some reason, despite

Code: [Select]

display: run-in apparently being a thing since CSS2, browser vendors either never implemented it in the first place, or dropped support around 2014 (https://caniuse.com/run-in). So now I'm wondering:

• How are we supposed to implement this styling, considering that the heading might have a bigger font-size and, therefore, simply floating it to the left might not work as expected?
• What are the historical reasons of such poor support for this feature? It's still in the CSS3 spec, but there are no up-to-date browsers left that support it.