A Search Engine In Pure CSS

Who am I?

Tim Carry

Developer Advocate

@pixelastic

Algolia: Search API

CSS API Client

www.algolia.com/css

Works offline!

No JavaScript Needed!

Flexbox!

CSS API Client

www.algolia.com/css

Works offline!

No JavaScript Needed!

Flexbox!

Live demo

Fast

Relevant

Highlighting

Typo-tolerance

Synonyms

Faceting

CSS? Really?

CSS is awesome

No variables

No conditions

No loops

No functions

No regular expressions

Selectors

tag

.class

#id

[attribute=foo]

hierarchical > tree

siblings ~ elements

CSS Strength

Selecting only

relevant

items

from a

large pool

of choices

Three tricks

Trick #1: Attribute selectors

HTML

<div foo="bar">1</div>
<div foo="baz">2</div>

CSS

div[foo="bar"] {
  background: green;
}

foo="bar"

foo="baz"

Trick #2: Pseudo-elements

HTML

<div>1</div>
<div id="foo">2</div>

CSS

#foo:before {
  content: "♥ "
}

♥ 2

Trick #3: Tilde selector

HTML

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="baz">baz</div>
<div class="foo">foo</div>

CSS

.bar ~ .foo {
  background: green;
}

.foo

.bar

.baz

.foo

#1 + #2 + #3

HTML

<input type="text" value="Tim" />
<div id="result"></div>

CSS

input[value="Tim"] ~ #result:before {
  content: "Tim Carry";
}

Tim Carry

Dynamic updates?

<input type="text" value=""/>
<div id="result"></div>

input[value="Tim"] ~ #result:before {
 content: "Tim Carry";
}

<input type="text" oninput="this.setAttribute('value', this.value)" />

It works!

input[value="tim" i] ~ #result:before {
 content: "Tim Carry";
}
input[value="jessica" i] ~ #result:before {
 content: "Jessica West";
}
input[value="daniel" i] ~ #result:before {
 content: "Daniel Maher";
}

Tim Carry

Jessica West

Daniel Maher

well...

input[value="tim" i] ~ #result:before {
 content: "Tim Carry";
}
input[value="jess" i] ~ #result:before {
 content: "Jessica West";
}
input[value="daniel" i] ~ #result:before {
 content: "Daniel Maher";
}

Inside the engine

The two parts of any search engine

Searching

What will

find

type "

Tim

Indexing

What should

a user

type

to find

Tim Carry

Splitting words

Tim Carry - Developer Advocate

N-grams

Tim

Carry

Developer

Advocate

Tim

Car

Carr

Carry

Dev

Deve

Devel

Develop

Develope

Developer

Adv

Advo

Advoc

Advoca

Advocat

Advocate

Prefix matching

input[value="t" i]     ~ #result:before,
input[value="ti" i]    ~ #result:before,
input[value="tim" i]   ~ #result:before,
input[value="c" i]     ~ #result:before,
input[value="ca" i]    ~ #result:before,
input[value="car" i]   ~ #result:before,
input[value="carr" i]  ~ #result:before,
input[value="carry" i] ~ #result:before {
 content: "Tim Carry";
}

Tim Carry

Edge-cases

Edge-cases and features

Accented characters

"Sébastien", "Sebastien"

Compound words

"Marie-Laure", "Marie Laure"

Synonyms

"Sylvain", "Utard", "Redox"

Typo-tolerance

"Schermesser", "Scermesser", "Schermeser"

, "Remy", "Rémy", "Rémy-Christophe", "Remy-Christophe", "RCS", "Scala", "Shermesser", "Scermesser", "ph'nglui mglw'nafh Schermesser R'lyeh wgah'nagl fhtagn",

Make it pretty

Layout

Several results

<input type="text" id="input"/>

<div id="results">
 <div id="result_1"></div>
 <div id="result_2"></div>
 […]
 <div id="result_98"></div>
 <div id="result_99"></div>
</div>

//Pre-fill results
#result_1:before { content: "Jason Harris"; }
#result_2:before { content: "Josh Dzielak"; }
#result_3:before { content: "Jonas Badalic"; }
// […]
// Hide them all
#results div { display: none; }

// Display some on specific queries
#input[value="jo" i] ~ #results #result_2,
#input[value="jo" i] ~ #results #result_3 {
  display: block;
}

Jason Harris

Josh Dzielak

Jonas Badalic

Styling in one div

  <div id="result_42"></div>

cloudinary.com

http://res.cloudinary.com/{app_id}/image/fetch/

w_220

h_220

r_max

e_grayscale

q_90

https://www.algolia.com/gianluca.png

Multi-line content

#result_42 {
  &:before {
    content: "Gianluca Bargelli Full-Stack Engineer";
  }
}

Multi-line content

#result_42 {
  &:before {
    content: "Gianluca Bargelli \A Full-Stack Engineer";
    white-space: pre;
  }
  &:first-line {
    font-weight: bold;
  }
}

Explaining results

Highlighting

Highlight in generated content?

#result_42:before {
  content: "Gianluca Bargelli \A Full-Stack Engineer";
}

Merge of two fonts

U+E000 – U+F8FF

#result_42:before {
  content: "\e647 \e669 \e661 \e66e luca Bargelli \A Full-Stack Engineer";
}

Subtle but useful

Ordering results

<input type="text" id="input"/>

<div id="results">
 <div id="result_1"></div>
 <div id="result_2"></div>
 […]
 <div id="result_98"></div>
 <div id="result_99"></div>
</div>

// Set a flex context
#results div { flex: 1; }
// Change order on specific queries
#input[value="st" i] ~ #result_4 {
 order: 1;
}
#input[value="st" i] ~ #result_8 {
 order: 2;
}
#input[value="st" i] ~ #result_15 {
 order: 3;
}

#result_4

#result_8

#result_15

Empty query

webtask.io

webtask.io/edit/

{appid}

random-css

#result_1 { order: 4; }
#result_2 { order: 8; }
#result_3 { order: 15; }
#result_4 { order: 16; }
#result_5 { order: 23; }
#result_6 { order: 42; }
[…]

{appid}

.webtask.io/

random-css

Learnings

Performance tricks

#id

is fast

:nth-child

is slow

Reduce filesize with

#r12

Use

#r12[id]

instead of

!important

Don't use more than

8192

selectors in one rule

Don't follow random performance tricks

Impossible only means you haven't found the solution

yet

tim@

algolia

.com

www.algolia.com/css

A Search Engine In Pure CSS

Tim Carry

@pixelastic

www.algolia.com/css

A Search Engine In Pure CSS

Tim Carry

@pixelastic