That special little code!

[Mikari]

Have you ever found a code that changed the way you design? I don't mean a new version of CSS or some other language, but a specific code within CSS, HTML, JS or PHP.

@keyframes is the most noticeable example for me, since my layouts now have animations. I totally fell in love with this fine example of how far CSS has come!

Another code that's less visually obvious but very present behind the scenes is display:inline-block; I can only describe it as the best of both worlds. It's better than if float:center; magically came into existence.

[dubiousdisc]

OH MY GOD YES

<figure> tags. Before the <figure> tag, adding pictures to a page was an ORDEAL and now there's an easy and perfectly semantic way to do it!

KEYFRAMES as you were saying. oh my god. animation in CSS. my life is complete. and you're so right, it shows how far CSS has come and I'm like
its proud older sister all like
look at it MY CSS MOVES

on that topic, all the transitions. I remember the days when to get a smooth transition it was Javascript or nothing. and now you can just set the transitions to whatever length and so on and it's so easy and aahhh

everything about <dl>

PURE CSS COLUMNS my love

and the whole background-size property which solves SO MANY of my problems with large backgrounds

(my excuses if I'm a bit disjointed tonight, my wine was tasty and I had a bit too much)

[Chibi]

I haven't really kept up with HTML and CSS, but what really changed my coding habits was... discovering divs back in the day! XD And seeing that divs could have scrollbars and could be centred! I didn't have to use horrible i-frames or tables any more, yay! (Yes, I like divs a lot...)

@Dubs: I am intrigued by everything you said! Where can I get more information on every function you cited? :D

[Lethe]

I have to read up on the stuff Mikari and dubiousdisc talk about lmao but:

I haven't really kept up with HTML and CSS, but what really changed my coding habits was... discovering divs back in the day! XD And seeing that divs could have scrollbars and could be centred! I didn't have to use horrible i-frames or tables any more, yay! (Yes, I like divs a lot...)

Yeah, I didn't code that much before last year, so I was still new to how to set up layouts in many regards. I basically did absolute positioning all the time, and thought that you could only use tables to accomplish certain things. I didn't know about divs with scrollbars and centered divs either... And then I learned about floats and it's like. BYE TABLE LAYOUTS. BYE.

I've seen dubiousdisc talk about CSS columns before and I love it so much ugh; can't wait to make a project where that is dominantly used.

[Mikari]

Dubs: I got curious about some of those codes and looked them up. I've actually been using CSS alternatives to do those things, but it's interesting to see there are codes specifically for that in html too.

Chibi: Divs definitely changed everything back in the day, they're amazing and I use them for everything now.

Lethe: One of my fav positioning tricks is to use absolute positioning inside a div that is positioned relative. :D I also like to use CSS columns alongside the before pseudo class to make lists like this.

[Robin]

PHP includes. Before then, I was coding iframe layouts because I hated the thought of having. to. put. all. layout. info. on. every. stinkin. page. xD Then one of my early shrining buddies told me about PHP includes and AAAAAAALLELUIA! Immediately transitioned all my sites to PHP and haven't done a layout in pure HTML ever since. XD

The other game-changer was CSS itself. Before then, I was using hard coded <font> tags and all sorts of hellacious stuff. LOL

Still haven't mastered "pure CSS" columns, though I'd like to. I just get frustrated because the structure ends up like

#left {float: left; width: 600px;}
#leftleft {float: left; width: 300px;}
#leftright {float: right; width: 300px;}
#right {float: right; width: 600px;}
#rightleft {float: left; width: 300px;}
#rightright {float: right; width: 300px;}

and I get halfway through coding it and am just like

NOPE
and
<table border="0" cellpadding="2" cellspacing="2" align="center" width="100%">

did I literally just type that ish from memory

[Chibi]

PHP includes. Before then, I was coding iframe layouts because I hated the thought of having. to. put. all. layout. info. on. every. stinkin. page. xD Then one of my early shrining buddies told me about PHP includes and AAAAAAALLELUIA! Immediately transitioned all my sites to PHP and haven't done a layout in pure HTML ever since. XD

OMG THIS. PHP includes are amazing and I am so glad I learned how to code them! It would be so tedious to have to copy-paste the layout in each page and then having to EDIT each page any time you edit/change the layout! PHP includes are a life saver, I cannot imagine what I'd do if they didn't exist.

[dubiousdisc]

Chibi: Here, I found some resources to explain all those things!

Figure tag
CSS3 animation (@keyframes) - kinda tricky; I've been playing with that for a while though, so if you have other questions, you can ask me directly (or Mikari, hee hee!).
Transitions
background-size

I can't easily find a good tutorial on <dl> (all of the ones that I'm seeing so far are way too confusing), so I'll explain it in my own words.

Consider this example: you want to make an infobox for a character saying what's their name, how old they are, etc. etc.
Chances are you're writing something like

Name: Eliwood
Age: 17

You may want to be able to mark all individual components of each thing, so that you can format that properly. For example, like I did it here, in which all the answers are on one side, and all the questions neatly on the other. Or maybe you want to have each answer on an individual line. Regardless of what you want to do with it, this is what the <dl> tag is for. It stands for definition list, and it's designed for this purpose!

So the above example becomes

Code: Select all

<dl>
<dt>Name:</dt>
<dd>Eliwood</dd>
<dt>Age:</dt>
<dd>17</dd>
</dl>

The <dl> kind of works like <ul> and <ol> in which it must wrap everything. Then each element inside is marked by <dt> and <dd> respectively: definition term and definition description. Now you can style all of them easily in your CSS without bloating your code with classes everywhere. :D

---

Mikari: Yeah, I mean, you could achieve the same things as <figure> for example just using divs and paragraphs. I'm just very glad that now there's tags DESIGNED for that purpose, you know? :D

I love the way absolute and relative positioning works. I love it especially from a conceptual, and, actually, philosophical standpoint. Absolute works...in a relative context.
...And I can't believe I just said that I like code from A PHILOSOPHICAL STANDPOINT. XD

Robin: Oh my god yeah, the includes. That changed everything.
What is it exactly that gives you trouble with that code? I don't really understand what's up with your example. :o Maybe I can help?

--

I FORGOT TO ADD. Even and odd in CSS. Now you can make stuff like tables with cells of alternating colors so easily!

AND, MOST RECENTLY, viewport units. You want something to be as tall as the browser window, wonderful and responsive? It's 100vh tall. Boom. That used to be such a hard problem to solve, and now there's a dirt easy way to do it directly in CSS!

[Chibi]

@Dubs: Thank you so much! (I also just noticed Lethe had linked to the CSS columns!) Oh my gosh, these bits of code are AMAZING! This really makes me want to start coding all kinds of layouts!

Also, for the viewport units - the way to do that is to just write

Code: Select all

height: 100vh;

into the code? Or do I need to write something else?

[dubiousdisc]

Yes, just that! I know! It's SO LITTLE CODE to solve such a problem!!!! :D
And yaaaaaaay