Date : 19th July 2024

For Chrome, Edge and Opera at the moment

Firefox and Safari not yet supporting interpolate-size:allow-keywords

Transition from height:0px to height:auto;

Triceratops

Triceratops (/traɪˈsɛrətɒps/ try-SERR-ə-tops; lit. 'three-horned face') is a genus of herbivorous chasmosaurine ceratopsid dinosaur that first appeared during the late Maastrichtian stage of the Late Cretaceous period, about 68 million years ago in what is now North America. It is one of the last-known non-avian dinosaur genera, and became extinct in the Cretaceous–Paleogene extinction event 66 million years ago. The name Triceratops, which literally means 'three-horned face', is derived from the Greek words trí- (τρί-) meaning 'three', kéras (κέρας) meaning 'horn', and ṓps (ὤψ) meaning 'face'.

Bearing a large bony frill, three horns on the skull, and a large four-legged body, exhibiting convergent evolution with rhinoceroses and bovines, Triceratops is one of the most recognizable of all dinosaurs and the most well-known ceratopsid. It was also one of the largest, up to 8–9 metres (26–30 ft) long and 5–9 metric tons (5.5–9.9 short tons) in body mass. It shared the landscape with and was most likely preyed upon by Tyrannosaurus, though it is less certain that two adults did battle in the fanciful manner often depicted in museum displays and popular images. The functions of the frills and three distinctive facial horns on its head have long inspired debate. Traditionally, these have been viewed as defensive weapons against predators. More recent interpretations find it probable that these features were primarily used in species identification, courtship, and dominance display, much like the antlers and horns of modern ungulates.

Stegosaurus

Stegosaurus (/ˌstɛɡəˈsɔːrəs/;[1] lit. 'roof-lizard') is a genus of herbivorous, four-legged, armored dinosaur from the Late Jurassic, characterized by the distinctive kite-shaped upright plates along their backs and spikes on their tails. Fossils of the genus have been found in the western United States and in Portugal, where they are found in Kimmeridgian- to early Tithonian-aged strata, dating to between 155 and 145 million years ago. Of the species that have been classified in the upper Morrison Formation of the western US, only three are universally recognized: S. stenops, S. ungulatus and S. sulcatus. The remains of over 80 individual animals of this genus have been found. Stegosaurus would have lived alongside dinosaurs such as Apatosaurus, Diplodocus, Brachiosaurus, Ceratosaurus, and Allosaurus; the latter two may have preyed on it.

They were large, heavily built, herbivorous quadrupeds with rounded backs, short fore limbs, long hind limbs, and tails held high in the air. Due to their distinctive combination of broad, upright plates and tail tipped with spikes, Stegosaurus is one of the most recognizable kinds of dinosaurs. The function of this array of plates and spikes has been the subject of much speculation among scientists. Today, it is generally agreed that their spiked tails were most likely used for defense against predators, while their plates may have been used primarily for display, and secondarily for thermoregulatory functions. Stegosaurus had a relatively low brain-to-body mass ratio. It had a short neck and a small head, meaning it most likely ate low-lying bushes and shrubs. One species, Stegosaurus ungulatus, is one of the largest known of all the stegosaurians, reaching 7 metres (23 ft) in length and 3.8 metric tons (4.2 short tons) in body mass, and some specimens indicate an even larger body size.

Diplodocus

Diplodocus (/dɪˈplɒdəkəs/, /daɪˈplɒdəkəs/, or /ˌdɪploʊˈdoʊkəs/) was a genus of diplodocid sauropod dinosaurs, whose fossils were first discovered in 1877 by S. W. Williston. The generic name, coined by Othniel Charles Marsh in 1878, is a neo-Latin term derived from Greek διπλός (diplos) "double" and δοκός (dokos) "beam", in reference to the double-beamed chevron bones located in the underside of the tail, which were then considered unique.

The genus of dinosaurs lived in what is now mid-western North America, at the end of the Jurassic period. It is one of the more common dinosaur fossils found in the middle to upper Morrison Formation, between about 154 and 152 million years ago, during the late Kimmeridgian Age. The Morrison Formation records an environment and time dominated by gigantic sauropod dinosaurs, such as Apatosaurus, Barosaurus, Brachiosaurus, Brontosaurus, and Camarasaurus. Its great size may have been a deterrent to the predators Allosaurus and Ceratosaurus: their remains have been found in the same strata, which suggests that they coexisted with Diplodocus.

Diplodocus is among the most easily identifiable dinosaurs, with its typical sauropod shape, long neck and tail, and four sturdy legs. For many years, it was the longest dinosaur known.

Information

While we wait for browsers to support calc-size there is now another CSS style that is currently supported by Chrome, Edge and Opera that will allow us to transition an element from height:0px; to height:auto;

This will still work in Firefox and Safari but their will be no transition between height:0pk; and height:auto;

This is :root {interpolate-size: allow-keywords;}

See interpolate-size for more information.

The above demonstration show how this can be used to show and hide information using html details/summary followed by a div with content styled with height:0px; and transition:height 1s;

With details[open] the following div is then styled with height:auto; and the div slides open.

So this is a true height:0 to height:auto transition without using any 'hacks'.

Please consider making a donation, every little helps.