Talking CSS: Thing You May Not Know

Speaker: 00:00:00

Welcome back to the business ignite podcast, where we light the fire

2

: 00:00:03

for business growth and marketing success.

3

: 00:00:05

Your hosts, Ethan Walker, Samantha Reed,

bring you the latest trends, expert

4

: 00:00:10

insights, and actionable strategies

to fuel your business journey.

5

: 00:00:14

Let's ignite your potential.

6

: 00:00:16

Samantha Reed: All right,

buckle up, everyone.

7

: 00:00:17

Cause we're about to dive into

some seriously next level CSS.

8

: 00:00:22

Ethan Walker: Ooh, I

like where this is going.

9

: 00:00:23

Samantha Reed: Even if you think

you've got a handle on cascading

10

: 00:00:26

style sheets, trust me, this deep

dive is going to unearth some gems.

11

: 00:00:30

Ethan Walker: Hidden depths, you say?

12

: 00:00:31

Samantha Reed: Oh, absolutely.

13

: 00:00:32

Today's source material

is a real eye opener.

14

: 00:00:35

Little known facts about CSS by

Joshua Maddox from 95 visual.

15

: 00:00:40

Ethan Walker: They're all about

that sweet spot where design

16

: 00:00:42

meets strategy, a winning combo.

17

: 00:00:44

Samantha Reed: Right.

18

: 00:00:44

And this article doesn't disappoint.

19

: 00:00:46

Ready to uncover some CSS tricks

that'll make your fellow devs

20

: 00:00:49

go, Whoa, how'd they do that?

21

: 00:00:51

Ethan Walker: I'm all ears.

22

: 00:00:52

Hit me with it.

23

: 00:00:53

Samantha Reed: Okay, let's start with

something that sounds deceptively simple.

24

: 00:00:56

Curved corners.

25

: 00:00:57

Ethan Walker: Ah, see, even something as

basic as a curved corner, there's a whole

26

: 00:01:01

lot of potential hiding under the surface.

27

: 00:01:03

Samantha Reed: So true.

28

: 00:01:04

Most folks, they just use a single

value for their border radius, right?

29

: 00:01:07

Ethan Walker: Right, but here's where

it gets interesting, that slash syntax.

30

: 00:01:11

Samantha Reed: You mean, where

you can control the horizontal

31

: 00:01:14

and vertical radii separately?

32

: 00:01:15

Ethan Walker: Bingo.

33

: 00:01:17

It's like having this fine tuned

control over the curvature.

34

: 00:01:19

Yeah.

35

: 00:01:19

Almost like using a design program

but, you know, within your CSS.

36

: 00:01:23

Samantha Reed: Now that's what

I call sweating the details.

37

: 00:01:25

Ethan Walker: You can create some truly

unique shapes and effects that go way

38

: 00:01:28

beyond your average rounded corner.

39

: 00:01:31

Samantha Reed: And speaking of

details, this next one's a game

40

: 00:01:33

changer, especially if you've ever

grappled with layout debugging.

41

: 00:01:36

I'm talking about the

outline offset property.

42

: 00:01:39

Ethan Walker: Ah, debugging.

43

: 00:01:40

The bane of every

developer's existence, right?

44

: 00:01:42

Tell

45

: 00:01:43

Samantha Reed: me about it.

46

: 00:01:44

But this property, it's like magic.

47

: 00:01:46

You can visually separate an element

from its outline so you instantly see

48

: 00:01:50

any overlaps or fine tuned spacing.

49

: 00:01:52

Ethan Walker: It's all about giving

your element some breathing room.

50

: 00:01:54

Visually speaking, a lifesaver

for those intricate layouts.

51

: 00:01:58

Samantha Reed: And while we're on

the topic of layouts, how about

52

: 00:02:01

we untangle the world of tables?

53

: 00:02:03

Ethan Walker: Oh, tables.

54

: 00:02:04

Always a fun one.

55

: 00:02:04

Samantha Reed: Because, you know, I

was today years old when I learned

56

: 00:02:07

there's a difference between display,

table, and the table layout property.

57

: 00:02:12

Ethan Walker: Yeah,

most folks use display.

58

: 00:02:15

Table to style elements to look like

tables, which is perfectly fine.

59

: 00:02:18

But table layout, that's

where the real power lies.

60

: 00:02:21

You're not just styling how it

looks, you're influencing how the

61

: 00:02:24

browser actually renders that table.

62

: 00:02:26

Samantha Reed: It's like you're

speaking directly to the browser's soul.

63

: 00:02:29

Ethan Walker: Ha ha, in a way.

64

: 00:02:30

For instance, if you go with

the fixed layout, that can

65

: 00:02:33

dramatically speed up rendering,

especially for data heavy tables.

66

: 00:02:36

Samantha Reed: And that, my

friends, is music to my ears.

67

: 00:02:39

Anything that makes websites

faster, I am here for it.

68

: 00:02:43

But let's not forget about

making our code look good, too.

69

: 00:02:45

Ethan Walker: Oh, absolutely.

70

: 00:02:46

Gotta keep things clean.

71

: 00:02:47

Samantha Reed: This next one blew my mind.

72

: 00:02:48

Using those invalid characters

like slashes or asterisks to

73

: 00:02:53

visually group CSS classes.

74

: 00:02:56

It's organizational genius.

75

: 00:02:58

Ethan Walker: It seems

like such a small thing.

76

: 00:03:00

But seriously, it does

wonders for code readability.

77

: 00:03:03

Think of it this way.

78

: 00:03:04

You walk into a library where every

book's just, like, scattered about.

79

: 00:03:08

Total chaos.

80

: 00:03:09

Don't

81

: 00:03:09

Samantha Reed: even get me

started on disorganized libraries.

82

: 00:03:12

Nightmare fuel.

83

: 00:03:13

Ethan Walker: Exactly.

84

: 00:03:14

Now imagine that same library.

85

: 00:03:15

But everything's neatly organized,

clearly labeled a dream.

86

: 00:03:19

That's what this technique

does for your code.

87

: 00:03:21

And let me tell you, that

kind of clarity is priceless.

88

: 00:03:24

Especially when you're collaborating

with others or, you know, revisiting

89

: 00:03:27

your own code after a while.

90

: 00:03:28

Samantha Reed: It's all about making

your code scannable at a glance.

91

: 00:03:31

Ethan Walker: Precisely.

92

: 00:03:31

Samantha Reed: Okay, ready

for some visual flair?

93

: 00:03:33

Let's talk animation.

94

: 00:03:34

Specifically those fractional values you

can use with animation iteration count.

95

: 00:03:38

Ethan Walker: Most people just

think of animations repeating a

96

: 00:03:40

whole number of times, which, hey,

works great for lots of situations.

97

: 00:03:44

Samantha Reed: Right, totally.

98

: 00:03:45

Ethan Walker: But sometimes, you

need that extra level of control, and

99

: 00:03:47

that's where fractional values come in.

100

: 00:03:49

Imagine an animation that needs to

run for, say, two and a half cycles.

101

: 00:03:53

Samantha Reed: Okay, I'm picturing it.

102

: 00:03:55

Ethan Walker: Fractional values

make it happen, no sweat.

103

: 00:03:57

Samantha Reed: So smooth.

104

: 00:03:59

Now prepare to have your mind blown.

105

: 00:04:01

Pseudo elements.

106

: 00:04:03

Styling content that's not

even directly in your HTML?

107

: 00:04:07

That feels like CSS sorcery to me.

108

: 00:04:09

Uh huh,

109

: 00:04:09

Ethan Walker: it does feel

kind of magical, right?

110

: 00:04:10

Totally.

111

: 00:04:11

Ever seen that elegant drop cap effect?

112

: 00:04:13

You know, where the first letter

of a paragraph is styled all fancy?

113

: 00:04:17

That's pseudo elements in action.

114

: 00:04:19

It's about elevating the visual

presentation, making the reading

115

: 00:04:22

experience more engaging,

and honestly borrowing a page

116

: 00:04:25

from classic print design.

117

: 00:04:27

Samantha Reed: I love that link

between web design and print history.

118

: 00:04:30

So cool.

119

: 00:04:31

And speaking of history,

I have a confession.

120

: 00:04:33

Ethan Walker: Hit me

121

: 00:04:34

Samantha Reed: with it.

122

: 00:04:35

Case sensitivity in CSS.

123

: 00:04:37

Had absolutely no idea

it was even a thing.

124

: 00:04:40

Ethan Walker: It's one of those things

that often trips people up, especially

125

: 00:04:42

since in most modern web dev, we're

all about that lowercase consistency.

126

: 00:04:47

Samantha Reed: Lowercase for life.

127

: 00:04:48

Ethan Walker: Right.

128

: 00:04:49

But knowing the case can matter,

especially in specific scenarios like

129

: 00:04:53

XHTML versus HTML, that knowledge can save

you from a world of debugging headaches.

130

: 00:04:58

Samantha Reed: It's a good reminder

that even in the world of code,

131

: 00:05:01

where things seem so black and

white, there are these quirks, these

132

: 00:05:04

echoes of how things used to be.

133

: 00:05:06

Ethan Walker: Absolutely.

134

: 00:05:07

And while we're on the subject

of quirks, CSS property that

135

: 00:05:11

seems to cause endless confusion?

136

: 00:05:13

Vertical align.

137

: 00:05:14

Samantha Reed: Ooh, I've

heard whispers of this one.

138

: 00:05:16

Sounds straightforward, but I know

it has a reputation for being,

139

: 00:05:19

well, a bit of a troublemaker.

140

: 00:05:20

Ethan Walker: It all boils down to this.

141

: 00:05:23

Vertical align acts very differently

inside table cells versus outside of them.

142

: 00:05:27

It's like it has two completely

different personalities.

143

: 00:05:30

Samantha Reed: It's kind of funny, right?

144

: 00:05:31

A property called vertical

align, you'd think it would just

145

: 00:05:33

work vertically no matter what.

146

: 00:05:34

Ethan Walker: You'd

think so, wouldn't you?

147

: 00:05:36

But tables, they always

gotta be special cases.

148

: 00:05:39

Samantha Reed: So before we move on,

any other gotchas when it comes to this?

149

: 00:05:43

Tricky vertical align?

150

: 00:05:44

Ethan Walker: Honestly, the main takeaway

is, table cells, that's where it shines.

151

: 00:05:49

Anywhere else, and you're

in for a wild ride.

152

: 00:05:51

Experiment, test, test

again, you know the drill.

153

: 00:05:54

Samantha Reed: Always test,

golden rule of web dev.

154

: 00:05:57

Ethan Walker: Truth.

155

: 00:05:58

And speaking of things with hidden

depths, did you know the color property?

156

: 00:06:02

It's not just for styling text.

157

: 00:06:04

Samantha Reed: Wait, what?

158

: 00:06:05

Seriously?

159

: 00:06:05

I've literally only ever used it for text.

160

: 00:06:08

Ethan Walker: It's easy to think

of it that way, but it actually

161

: 00:06:10

plays into inheritance too.

162

: 00:06:11

Let's say you get a button you're styling.

163

: 00:06:13

Instead of, like, separately

defining the border color,

164

: 00:06:16

you can just do border color.

165

: 00:06:17

Inherit.

166

: 00:06:17

Boom.

167

: 00:06:18

It inherits the color

from its parent element.

168

: 00:06:21

Saves you code, keeps

things consistent, win win.

169

: 00:06:23

Samantha Reed: Oh, that's elegant.

170

: 00:06:24

Love me some efficient code.

171

: 00:06:26

Okay, last but not least, we've got what

sounds like a mythical CSS creature.

172

: 00:06:31

The collapse value for

the visibility property.

173

: 00:06:34

I gotta be honest, this one

has me completely stumped.

174

: 00:06:37

Ethan Walker: Yeah, it's definitely

one of the lesser known values and

175

: 00:06:39

it gets a little tricky because

we're getting into how the browser

176

: 00:06:42

actually renders things, you know.

177

: 00:06:44

Samantha Reed: Down to the nitty gritty.

178

: 00:06:45

Ethan Walker: Exactly.

179

: 00:06:46

Now, we all know visibility.

180

: 00:06:48

Yeah.

181

: 00:06:49

Hidden or display?

182

: 00:06:51

None make stuff disappear, right?

183

: 00:06:53

Poof.

184

: 00:06:53

Done.

185

: 00:06:54

But they do it in slightly different ways.

186

: 00:06:55

Think of visibility.

187

: 00:06:57

Collapse as like a super

specialized version of display.

188

: 00:07:02

None, but for table elements specifically.

189

: 00:07:05

Samantha Reed: Okay, so if I use

it on a table cell, what happens?

190

: 00:07:08

How does it affect the layout around it?

191

: 00:07:11

Ethan Walker: So imagine you've got

a table row, and you use display.

192

: 00:07:15

None on one of the cells.

193

: 00:07:17

That entire cell is out of there,

and the remaining cells, they kind

194

: 00:07:19

of redistribute to fill that gap.

195

: 00:07:21

Samantha Reed: Makes sense.

196

: 00:07:22

Ethan Walker: So you use visibility,

collapse on that same cell.

197

: 00:07:24

It's like the cell just folds in

on itself without messing with the

198

: 00:07:27

layout of the other cells around it.

199

: 00:07:29

The space it took up, completely gone.

200

: 00:07:31

Samantha Reed: Whoa, that's wild.

201

: 00:07:32

It's like collapse is way more

precise, like a surgical removal.

202

: 00:07:35

Man, this just makes me realize

how much I don't know about CSS.

203

: 00:07:39

It's humbling, really.

204

: 00:07:40

Ethan Walker: Isn't it amazing, though?

205

: 00:07:41

There's always something new to

discover, even for us seasoned folks.

206

: 00:07:45

This field, it never sits still, which

is part of what makes it so exciting.

207

: 00:07:49

Gotta keep learning, keep exploring.

208

: 00:07:51

Samantha Reed: So true.

209

: 00:07:51

And for everyone listening,

think about how you can use these

210

: 00:07:55

hidden gems in your own projects.

211

: 00:07:57

Ethan Walker: Right.

212

: 00:07:57

Put them to work.

213

: 00:07:58

Samantha Reed: Want those super

smooth, custom curved corners?

214

: 00:08:01

We've given you the secret formula.

215

: 00:08:03

Need to debug your layouts like a pro?

216

: 00:08:06

Outline Offset is your new best friend.

217

: 00:08:09

And who can resist playing with

fractional animation values?

218

: 00:08:12

Your web animations

will never be the same.

219

: 00:08:15

Ethan Walker: Out of all

these CSS secrets, which one

220

: 00:08:17

are you most excited to try?

221

: 00:08:19

What really got your gears turning?

222

: 00:08:20

Samantha Reed: It really makes you

realize, huh, even something like

223

: 00:08:24

CSS, which we use all the time,

still has these hidden depths.

224

: 00:08:28

Ethan Walker: It's kind

of mind blowing, right?

225

: 00:08:29

Just goes to show there's always

something new to uncover no

226

: 00:08:32

matter how long you've been at it.

227

: 00:08:33

Samantha Reed: And that's

what I love about this field.

228

: 00:08:35

It keeps you on your toes.

229

: 00:08:37

This deep dives just

reinforce that for me.

230

: 00:08:39

It's not just about like memorizing code.

231

: 00:08:41

It's about understanding the why,

the how, the history behind it all.

232

: 00:08:45

It gives you a whole new

appreciation, you know?

233

: 00:08:48

Ethan Walker: It's like we peek behind the

curtain and seeing how the magic happens.

234

: 00:08:50

Samantha Reed: Exactly.

235

: 00:08:51

And that's what I hope

listeners take away from this.

236

: 00:08:53

Don't be afraid to dig deeper, even in

areas you think you've got figured out.

237

: 00:08:57

Ethan Walker: Curiosity is key.

238

: 00:08:59

Always be asking those what if questions.

239

: 00:09:01

Samantha Reed: So as we wrap

up our CSS adventure, here's a

240

: 00:09:05

thought I've been wrestling with.

241

: 00:09:06

If CSS, with all its rules and quirks,

still has these surprises in store,

242

: 00:09:11

what other areas of knowledge, things

we think we know inside and out, could

243

: 00:09:15

benefit from this kind of deep dive?

244

: 00:09:16

Ethan Walker: Ooh, that's a good one.

245

: 00:09:18

What assumptions are we carrying

around that maybe, with a fresh

246

: 00:09:21

perspective, could be challenged or

even completely flipped on their head?

247

: 00:09:25

Samantha Reed: Right.

248

: 00:09:25

It's a thought provoking

question for sure.

249

: 00:09:28

Well, on that note, keep those browsers

coding and those minds curious.

250

: 00:09:31

Until next time, everyone.

251

: 00:09:34

Speaker 2: Thanks for tuning

into the Business Ignite podcast,

252

: 00:09:36

where we fuel your business

growth and marketing success.

253

: 00:09:40

If you enjoyed today's episode,

be sure to rate and review us.

254

: 00:09:43

It does help others find the show.

255

: 00:09:46

Don't forget to follow us on social

media at Business Ignite podcast and

256

: 00:09:50

share this episode with a friend.

257

: 00:09:53

Keep the fire burning and remember,

your success is just one strategy away.

258

: 00:09:59

Until next time, stay ignited.